Question

当我有多个课程时，如何点击类名并调用函数？在我的代码中，我有9个类框，我想在每次单击时调用一个函数。

＆＃13;

x86_64-w64-mingw32-as

＆＃13;

Answer 1

getElementsByClassName会返回HTMLCollection，而不是单个元素，因此您无法直接将事件处理程序附加到其中。
您需要迭代此集合并为每个元素设置事件事件处理程序：

items = document.getElementsByClassName('box');
[].forEach.call(items, function (el) {
  el.addEventListener('click', player);
});

HTMLCollection不是一个合适的数组，所以你不能直接调用它上面的forEach方法，但你可以在数组上调用forEach并将集合传递给它。

Answer 2

el给出一个HTMLCollection，所以你需要在每个上迭代并设置onclick监听器，在ES6中你可以简单地用[...el]将HTMLCollection转换成数组，所以代码变为：

var el = document.querySelectorAll('.box');
[...el].forEach(e => e.onclick = player)

Fiddle Demo

Answer 3

[]。slice用于将调用结果转换为新数组。因此，您可以使用forEach。

 var el = document.getElementsByClassName('box');
    el_arr = [].slice.call(el);
    el_arr.forEach(function(obj,i){
    obj.addEventListener("click",function(){
        player();
         });
    });

Javascript onclick多个类的事件处理程序

3 个答案: