1

我确定我在这里遗漏了一些非常简单的东西，但我只是想向我的一个元素添加一个点击事件，但控制台一直说“Null 不是对象”

这是我的标记

<section class="section active">
  <div class="hidden-content">

  </div>
  <button class="button"></button>
</section>

<section class="section">
  <div class="hidden-content">

  </div>
  <button class="button"></button>
</section>

<section class="section">
  <div class="hidden-content">

  </div>
  <button class="button"></button>
</section>

我正在使用的 javascript

document.querySelector('.section.active .button').addEventListener('click', function(){
     document.querySelector('.section.active .hidden-content').classList.add('show')
});

我知道我可以像这样做一个 queryselectorAll 并添加点击处理程序

var hiddenContent = document.querySelectorAll('.button');
for (var i = 0; i < button.length; i++) {
    button[i].addEventListener('click', function(){
         document.querySelector('.section.active .hidden-content').classList.add('show')
    });
}

我问的原因是我知道在任何时候都只会有一个（section.active .button），这就是为什么我很惊讶queryselector对我不起作用，因为它只会返回它找到的第一个就是这个。（当然除非我错了）

感谢任何关于我哪里出错的建议。

谢谢

4

1 回答 1

2

问题是您将点击处理程序添加到div隐藏的 ，因此它永远不会接收和点击（它的大小为零）。在您的 div 中放置任何内容都可以使其可点击。

https://jsfiddle.net/8v0w0nrf/

如果您希望操作发生在按钮上，请选择它们。

像以前一样使用“.hidden-content” div：

var div = document.querySelector('.section.active .hidden-content');
div.parentElement.querySelector('.button').addEventListener('click', function(){
    //Do something
});

或者，您可以直接进入按钮：

document.querySelector('.section.active .button').addEventListener('click', function() {
    // Do something
});

不过要小心，您将需要在section.active类更改时更新此事件侦听器。

于 2018-05-28T14:51:44.850 回答