使用类选择器选择多个元素并添加 addEventListener

Question

我不明白为什么当我点击那些具有 click-to-open 类的元素时，下面的这个函数不起作用，我正在尝试做一个类似于 JavaScript 手风琴的东西。

document.getElementsByClassName('click-to-open').addEventListener('click', function(){
                document.getElementsByClassName('click-to-open').style.maxHeight = '40px';
                this.style.maxHeigh = '500px';
            });

- Georgi Antonov

---

因为 getElementsByClassName 返回一个元素数组，即使只有一个元素，你需要使用事件委托来节省资源和提高性能。这里有一篇文章可以参考：article。 - dexhering

Answer 1

尝试这个：

var clickToOpen=document.getElementsByClassName('click-to-open');

for(var i=0;i<clickToOpen.length;i++){
     clickToOpen[i].addEventListener('click', function(){
                        this.style.maxHeight = '500px';
                    });
}

方法getElementsByClassName()始终返回一个类数组集合，如果您想针对所有DOM元素进行操作，则需要遍历它们。使用Jquery有更加优雅的方法来实现。

这是一个演示：https://jsfiddle.net/2tx2s3rz/2/ 展示了代码。

- Yehia Awad

---

它仍然无法工作，我想将此事件侦听器附加到具有此类的所有元素，而不仅仅是第一个。 - Georgi Antonov

@Georgi Antonov 请现在尝试一下。 - Yehia Awad

如果我可以使用Jquery，那就好了，但是我只能用原生的JavaScript，而且它还不能正常工作。你的新代码仍然无法运行。 - Georgi Antonov

https://jsfiddle.net/2tx2s3rz/ 看一下这个 jsfiddle，它有效。 - Yehia Awad

@Georgi Antonov，我已经对代码进行了更改，现在你可以重试了。我没有注意到你正在事件监听器内调用document.getElementsByClass()。 - Yehia Awad