Question

我在Javascript中有一个简单的点击功能，我正在努力工作。我遇到的问题是click函数只适用于类的第一个元素，当你点击任何带有类的元素时，我希望它能触发。

const element = document.querySelector('.js-element')
if ( element ) element.addEventListener('click', function () {
    alert('click');
})

任何人都可以告诉我哪里出错了吗？

由于

Answer 1

要将事件附加到具有类js-element的所有元素，您必须选择具有querySelectorAll()的所有元素，然后使用循环来迭代并附加如下事件：

const element = document.querySelectorAll('.js-element')
if (element) {
  element.forEach(function(el){
     el.addEventListener('click', function () {
        alert('click');
     });
  });
}

Answer 2

使用querySelectorAll()

 const element = document.querySelectorAll('.js-element');
    if (element.length !== 0) {
      for (var i=0; i<element.length; i++) {
        element[i].addEventListener('click', function () {
          alert('click');
        });
      }
    }

Element方法querySelectorAll（）返回一个静态（非实时）NodeList，表示与指定的选择器组匹配的文档元素列表。

Answer 3

根据documentation：

Document方法querySelector（）返回第一个Element 与指定选择器或组的匹配的文档选择。如果未找到匹配项，则返回null。

所以发生的事情是有道理的。

您可以尝试这样的事情（未经测试）：

var elements = document.getElementsByClassName('.js-element');
for(let i = 0; i < elements.length; i++) {
    let element = elements[i];
    if ( element ) {
        element.addEventListener('click', function () {
            alert('click');
        });
    } // end if statement
}

或者使用jQuery。

$('.js-element').on('click', function() {
    alert('click')
});

Javascript单击功能仅适用于第一个元素

3 个答案: