javascript - JQuery在线面试(15分钟)TestDome

标签 javascript jquery

<分区>

function createProductCodeForm(parent) {
  var form = $("<form/>");

  form.append($("<label>").text('Product Code:'));
  form.append($("<input>").attr('name', 'productCode').attr('type', 'text'));
  form.append($("<label>").attr('name', 'hint').text('The product code can be found on the label.'));

  form.append('<br>');

  form.append($("<input>").attr('type', 'submit'));

  parent.append(form);
}

createProductCodeForm 函数用于创建一个接受用户产品代码的新表单。

当前版本的表格包含提示:“产品代码可以在标签上找到”。此提示当前始终对用户可见。

改进表单,以便仅当输入元素是焦点元素时才呈现提示。

我在完成这个问题时遇到了问题,因为我对 jquery 的经验很少,而且大部分测试都是使用 javascript/php 进行的。

最佳答案

您只需绑定(bind)正确的属性即可完成这一切:

function createProductCodeForm(parent) {
  var form = $("<form/>");

  form.append($("<label>").text('Product Code:'));
  form.append($("<input>").attr('name', 'productCode').attr('type', 'text').attr('onfocus','$("label[name]").show()').attr('onblur','$("label[name]").hide()'));
  form.append($("<label>").attr('name', 'hint').text('The product code can be found on the label.').attr('style','display:none'));

  form.append('<br>');

  form.append($("<input>").attr('type', 'submit'));

  parent.append(form);
}

代码笔:https://codepen.io/YasirKamdar/pen/xYJdNy

关于javascript - JQuery在线面试(15分钟)TestDome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43532755/

相关文章:

javascript - 如何在 nativescript-vue 弹窗中使用 vue 组件?

javascript - HTML 中的 $scope 变量在刷新时消失

JavaScript 全局添加函数

javascript - 不能跨域。 XMLHttpRequest 无法加载 localhost :portNo1 . Origin localhost:portNo2 不允许 Access-Control-Allow-Origin

javascript - 先加载 JSON

javascript - 使用 JS 或 jQuery 按字母顺序排列列表

javascript - JS : call methods of an object inside jquery "click"

javascript - vuejs 根据值禁用/启用选择

javascript - 如何在不修改全局 Function.prototype 的情况下创建函数的继承属性?

javascript - 键入时进行验证、预填充和潜在阻止