javascript:通过类名调用函数

Question

尝试创建一个由 className 绑定(bind)并调用另一个函数的脚本。

我的这段代码适用于 className 的第一个实例，但如果我删除脚本第一行中的 [0] ，它就不再有效。

  <input type="text" value="NOTBound" class="NOTBound"/>
  <input type="text" value="Bound value 1" class="Bound"/>
  <input type="text" value="NOTBound" class="NOTBound"/>
  <input type="text" value="Bound value 2" class="Bound"/>
  <script>
  inputBound = document.getElementsByClassName('Bound')[0];
  inputBound.onfocus = function() {
      var input = this.value;
      formFunct(input);
  }
  function formFunct(input) {
      console.log('done did the form Funct: ' + input)
  }
  </script>

如何让它适用于 className="Bound" 的所有输入？我不需要 jQuery 解决方案。

谢谢。

Answer 1

Use a loop to iterate all elements.

使用Array#forEach ，forEach() 方法对每个数组元素执行一次提供的函数。

另一个替代方案可以使用 Array.from覆盖由 getElementsByClassName 返回的 HTMLCollection，以便您可以直接在返回的结果上调用 Array# 方法。

var inputBound = document.getElementsByClassName('Bound');
[].forEach.call(inputBound, function(inputBound) {
  inputBound.onfocus = function() {
    var input = this.value;
    formFunct(input);
  }
})

function formFunct(input) {
  console.log('done did the form Funct: ' + input)
}

<input type="text" value="NOTBound" class="NOTBound" />
<input type="text" value="Bound value 1" class="Bound" />
<input type="text" value="NOTBound" class="NOTBound" />
<input type="text" value="Bound value 2" class="Bound" />

注释:

• 引用What does [].forEach.call() do inJavaScript?理解[].forEach.call。
• 正如评论中所建议的，您也可以使用for-loop来迭代HTMLCollection。
• 至Browsercompatibility担心的话，可以使用 Polyfill