jQuery在线采访(15分钟)testdome

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

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

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

我遇到了一个问题，因为我对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/pen/xyjdny

Answer 2

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

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'))

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

Answer 3

您可以使用Bootstrap插件来完成任务。

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'))

<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>

Answer 4

我认为HTML中的元素应该设置类或ID以确认正确的对象(EX INTUP：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();
  });
}