Question

我正在尝试将variableName.addEventListener("transitionend", function ()添加到所有名为.aboutCollapsible的类中。下面提供的代码仅在第一个元素上有效，因为它是querySelector而不是querySelectorAll。

JavaScript代码： 编写所有代码的原因是出于上下文考虑，以防需要理解该问题。

//var coll = document.getElementsByClassName("collapsible");
const el = document.querySelector(".aboutCollapsible");
//var i;
//
//for (i = 0; i < coll.length; i++) {
//    coll[i].addEventListener("click", function () {
//        this.classList.toggle("active");
//        var content = this.nextElementSibling
//        if (content.style.maxHeight < "100%") {
//            content.style.maxHeight = content.scrollHeight + "px";
            el.addEventListener("transitionend", function () {
                content.style.maxHeight = "100%"
            });
//        } else {
//            content.style.transitionDuration = "0s"
//            content.style.maxHeight = content.scrollHeight + "px";
//            content.style.maxHeight = content.scrollHeight + "px";
//            content.style.transitionDuration = "0.5s"
//            content.style.maxHeight = "0px";
            el.addEventListener("transitionend", function () {
                content.style.maxHeight = null
                content.style.transitionDuration = null
            });
//        }
//    });
//}

将querySelector更改为querySelectorAll时出现以下错误：

TypeError：el.addEventListener不是函数

我该如何解决将addEventListener("transitionend", function () {添加到所有名为.aboutCollapsible的类的问题？

更新：这似乎可行，但是没有更好的方法。每次触发点击时，我是否真的必须运行forEach循环？我可以不直接调用transitionend函数吗？

// Button Collapsible
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var content = this.nextElementSibling
        if (content.style.maxHeight < "100%") {
            content.style.maxHeight = content.scrollHeight + "px";
            document.querySelectorAll(".aboutCollapsible").forEach(e => e.addEventListener("transitionend", function(){
                content.style.maxHeight = "100%"
            }));
        } else {
            content.style.transitionDuration = "0s"
            content.style.maxHeight = content.scrollHeight + "px";
            content.style.maxHeight = content.scrollHeight + "px";
            content.style.transitionDuration = "0.5s"
            content.style.maxHeight = "0px";
            document.querySelectorAll(".aboutCollapsible").forEach(e => e.addEventListener("transitionend", function(){
                content.style.maxHeight = null
                content.style.transitionDuration = null
            }));
        }
    });
}

Answer 1

您需要遍历它：

[...document.querySelectorAll(".aboutCollapsible")].forEach(e => e.addEventListener("transitionend", function() {...}));
// Or:
document.querySelectorAll(".aboutCollapsible").forEach(e => e.addEventListener("transitionend", function() {...}));

或使用jQuery：

$(".aboutCollapsible").on("transitionend", function() {...});

我可以在querySelectorAll上使用“ addEventListener”吗？

1 个答案: