Question

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函数用于创建一个接受用户产品代码的新表单。

表单的当前版本包含提示：'产品代码可以在标签上找到'。此提示目前始终对用户可见。

改进表单，以便仅在input元素是focus元素时才呈现提示。

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

Answer 1

您只需绑定正确的属性即可完成所有操作：

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);
}

Codepen：https://codepen.io/YasirKamdar/pen/xYJdNy

Answer 2

您必须为焦点/模糊事件创建事件处理程序：

＆＃13;

function createProductCodeForm(parent) {
  var form = $("<form/>");
  var input = $("<input>")
                .attr('name', 'productCode')
                .attr('type', 'text');

  var label = $("<label>")
                .attr('name', 'hint')
                .text('The product code can be found on the label.')
                .hide();

  form.append($("<label>").text('Product Code:'));
  form.append(input);
  form.append(label);
 
  input.focus(label.show.bind(label));
  input.blur(label.hide.bind(label));
  
  form.append('<br>');
  form.append($("<input>").attr('type', 'submit'));
  parent.append(form);
}

createProductCodeForm($('#formContainer'))

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="formContainer"></div>

＆＃13;

Answer 3

您可以使用Bootstrap插件执行此任务。

＆＃13;

function createProductCodeForm(parent) {
  var form = $("<form/>");

  form.append($("<label>").text('Product Code:'));
  var $productCode = $('<input />'); 
  $productCode.attr({'name' : 'productCode', 'type': 'text'});
  // use Bootstrap tooltip plugin:
  $productCode.tooltip({'trigger':'focus', 'title': 'The product code can be found on the label.', 'placement':'right'});
  form.append($productCode);
  form.append('<br>');

  form.append($("<input>").attr('type', 'submit'));

  parent.append(form);
}

createProductCodeForm($('body'))

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

Answer 4

我认为对于html中的元素，应设置类或ID来确认正确的对象（例如input：txtInput，label：lblHint）。所以我认为代码应如下所示：

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

  form.append($("<label>").text('Product Code:'));
  form.append($("<input>").attr('name', 'productCode').attr('type', 'text').attr('id', 'txtInput'));
  form.append($("<label>").attr('name', 'hint').css("display", "none").attr('id', 'lblHint').text('The product code can be found on the label.'));
  form.append('<br>');
  form.append($("<input>").attr('type', 'submit'));
  parent.append(form);
  $("#txtInput").focusin(function() {
    $("#lblHint").show();
  });
  $("#txtInput").focusout(function() {
    $("#lblHint").hide();
  });
}

JQuery采访在线（15分钟）TestDome

4 个答案: