如何使用闭包概念获得相同的输出

Question

只要用户关注任何输入字段，此代码就会显示帮助文本。我的问题是我想编写具有相同功能但使用闭包概念的代码。 Idk如果这段代码已经使用了闭包概念，如果确实如此，请告诉我它在哪里，如果没有，请告诉我你是如何使用闭包概念的。

Manifest-Version: 1.0
Class-Path: . myJarName_lib/gson-2.8.0.jar myJarName_lib/jsoup-1.8.3.jar myJarName_lib/commons-cli-1.2.jar myJarName_lib/jackson-core-2.8.8.jar
Main-Class: upwork.Main

var allInputs = document.querySelectorAll('.form-container p input:not([type="submit"])');

for (var i = 0; i < allInputs.length; i++) {
  var inputField = allInputs[i];
  var inputFieldId = inputField.id;
  var getInput = document.getElementById(inputFieldId);
  getInput.addEventListener('focus', helperNote, false);
}

function helperNote(e) {
  var helperNode = document.querySelector('.form-container #helperNote');
  var helperNote = document.createTextNode('Please input the ' + e.target.name);
  //console.dir (helperNote);
  helperNode.textContent = helperNote.data;
  helperNode.style.visibility = "visible";
}

Answer 1

您的代码目前没有使用任何闭包，但您可以使用一个闭包来替换for循环，并使用接受回调的forEach函数。这将消除您对e参数的需求，因为您可以访问周围词法范围中的getInput变量。 NodeList通常有一个内置的forEach方法，但它在IE上不可用，因此您可以使用these alternatives之一。

我注意到你这里有很多不必要的代码，所以我也删除了它。

＆＃13;

＆＃13;

var forEach = function(array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, array[i], i, array);
  }
};

var inputs = document.querySelectorAll('input:not([type="submit"])');
var helperNote = document.getElementById('helperNote');

forEach(inputs, function(input) {
  input.addEventListener('focus', function() {
    helperNote.textContent = 'Please input the ' + input.name;
  });
});

＆＃13;

label { display: block; margin: 5px 0; }

＆＃13;

<form method="post">
  <p>Fill The Form Below</p>
  <p id="helperNote">Helper note appears here</p>
  <label>Email: <input type="email" name="email"></label>
  <label>Username: <input type="text" name="username"></label>
  <label>Name: <input type="text" name="name"></label>
  <label>Age: <input type="number" name="age"></label>
  <label>City: <input type="text" name="city"></label>
  <input type="submit" name="submit" value="Sign Up">
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

关于功能的

$("button.btn-tooltip").data( "placement", "left" );

不要担心语法的技术术语，而是要专注于功能。

使用forEach迭代focus元素，添加事件监听器，触发后，将所需的更改应用于<input>的{​​{1}}

请注意4castle的答案：Internet Explorer目前在textContent上对#helperNote缺乏支持。
我感谢他提醒我[].slice.call()，我在下面使用它来将forEach()返回的NodeList转换为IE Array允许Array.from() blur 1}} on（因为它目前还不支持nifty CSS goodies）。

我已添加处理，以便在NodeList丢失querySelectorAll()时重置forEach，并使用一些来获得乐趣。< / p>

＆＃13;

＆＃13;

#helperNote

＆＃13;

input

＆＃13;

focus

＆＃13;

＆＃13;

＆＃13;