单击一个在相同类元素上触发的函数

Question

我正在尝试为具有子类别和子子类别列表的类别列表制作控件。

这是 HTML：

<ul class="selectbox-ul">
    <li>
        <div>Category</div>
        <ul class="selectbox-ul-child">
            <li>
                <div>Subcategory</div>
                <ul class="selectbox-ul-child">
                    <li>
                        <div>Sub-subcategory</div>
                    </li>
                </ul>
                <span id="trigger">icon</span>
            </li>
        </ul>
        <span id="trigger">icon</span>
    </li>
    ....
</ul>

所以我的镜头是为ul.selectbox-ul-child添加类：

var trigger = document.getElementById("trigger");
function subCatStatus() {
    if(this.parentElement.children[1].className != "... expanded") {
        this.parentElement.children[1].className += " expanded"
    } else {
        this.parentElement.children[1].className == "..."
    };
};
trigger.addEventListener("click", subCatStatus);

它仅适用于第一个span#trigger（显示子类别），下一个（用于子子类别）什么都不做（我也尝试使用.getElementsByClassName，它不适用于任何触发器）。所以我想得到一些解释，为什么这个不起作用。还有一些建议如何使其工作。

Answer 1

正如其他人已经提到的，您不能使用相同的 ID 堆叠多个元素，因为document.getElementById()不应该返回多个值。

您可以尝试将"trigger"类分配给每个跨度而不是 ID，然后尝试以下代码

var triggers = document.getElementsByClassName("trigger");
function subCatStatus() {
    if(this.parentElement.children[1].className != "... expanded") {
        this.parentElement.children[1].className += " expanded"
    } else {
        this.parentElement.children[1].className == "..."
    };
};
for(var i = 0; i < triggers.length; i++) {
    triggers[i].addEventListener("click", subCatStatus);
}

Answer 2

javascript getElementById 只返回单个元素，因此它仅适用于您找到的第一个带有 ID 的元素。

getElementsByClassName 返回一个具有相同类的找到元素数组，因此当将侦听器添加到元素上的事件时，您需要遍历此数组并单独添加到其中。