Question

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

我有这个代码用于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

使用循环迭代所有元素。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

备注：

参考What does [].forEach.call() do in JavaScript? 理解[].forEach.call。

根据评论中的建议，您也可以使用for-loop进行迭代 HTMLCollection。

至Browser compatibility 有人担心，人们可以使用 Polyfill

Answer 2

迭代<configuration> <system.web>  <httpRuntime maxRequestLength="1048576" timeout="3600" /> </system.web> </configuration>  <system.webServer> <security> <requestFiltering>  <requestLimits maxAllowedContentLength="1048576000" /> </requestFiltering> </security> </system.webServer>并将事件处理程序附加到元素。

＆＃13;

NodeList

＆＃13;

// get all elements and convert to array
Array.from(document.getElementsByClassName('Bound'))
  // iterate overa array elements
  .forEach(function(ele) {
    // bind event handler
    ele.onfocus = function() {
      var input = this.value;
      formFunct(input);
    }
  });

function formFunct(input) {
  console.log('done did the form Funct: ' + input)
}

＆＃13;

Answer 3

简单地迭代Node中的所有NodeList（带有良好的旧for循环:)）

inputBounds = document.getElementsByClassName('Bound');
for( var counter = 0; counter < inputBounds.length; inputBounds++ )
{
  inputBounds.item( counter ).onfocus = function() {
      var input = this.value;
      formFunct(input);
  }   
}

javascript：按类名调用函数

3 个答案: