Question

道歉，如果这是愚蠢但我觉得这个问题我有点生气。将querySelectorAll记录到控制台时，我一直收到一个未定义的错误。一旦我能解决问题，我想在querySelectorAll选择器下面添加一个click事件。我想要的是当该部分具有活动类时，btn单击处理程序可以工作。

<section class="section test active">
  <div class="btn"></div>
</section>

<section class="section test">
  <div class="btn"></div>
</section>

var btn = document.querySelectorAll('.section.active .btn');
console.log(btn[0]);

这显示未定义。

我想要做的是像

var btn = document.querySelectorAll('.section.active .btn');
    btn.addEventListener('click', function() {
 //Do something
});

EDIT 抱歉，我忘了将课程部分添加到部分标签

欣赏任何建议

Answer 1

.section定位了类section的元素。您打算选择包含<section>类的.active。要使其适用于NodeList，您需要遍历返回的列表，或使用querySelector

var btns = document.querySelectorAll("section.active .btn");

[].forEach.call(btns, function(btn) {

  btn.addEventListener("click", function() {
    //Do something
  });

});

Answer 2

您尝试将事件分配给HTMLCollection与一个特定元素。不行。相反，循环遍历集合并单独将事件分配给每个元素，如下所示：

var btn = document.querySelectorAll('.section.active .btn');

Array.prototype.forEach.call(btn, function(elem) {
  elem.addEventListener('click', function() {
    console.log('clicked');
  });
});

<section class="section test active">
  <div class="btn">Active Button</div>
</section>

<section class="section test">
  <div class="btn">Button</div>
</section>

Answer 3

尝试以下代码。您在.之前放置section这是错误的

var btn = document.querySelectorAll('.section.active .btn');
console.log(btn[0]);

var btn = document.querySelectorAll('.section.active .btn');
btn.forEach((b)=> {
   b.addEventListener('click', function() {
      // Do something
  });
})

<section class="section test active">
  <div class="btn"></div>
</section>

<section class="test">
  <div class="btn"></div>
</section>

Answer 4

您的选择器错误（部分前面的点），它应该是

var btn = document.querySelectorAll('section.active .btn');

querySelectorAll也返回一个元素列表，你必须分别为每个元素添加事件处理程序。

for (var x = 0; x < btn.length; x++){
    btn[x].addEventListener('click', function() {
     //Do something
    });
}

Javascript querySelectorAll undefined

4 个答案: