在同一类元素上触发的一个功能单击答案

【问题标题】：one function to fire on same class elements click在同一类元素上触发的一个功能单击
【发布时间】：2017-01-13 23:14:51
【问题描述】：

我正在尝试使用子类别和子子类别列表来控制类别列表。

这里是 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 它不起作用对于任何触发器）。所以我想解释一下为什么这个不起作用。以及如何使其发挥作用的一些建议。

【问题讨论】：

你应该只有一个#trigger，因为 id 应该是唯一的
你不应该有很多具有相同 id 的元素。您需要使用不同的选择器，例如类名并迭代匹配的元素添加事件监听器
原因为什么有两个具有相同 id 的元素是不好的，除了它是无效的 Html 之外，是因为 getElementById 只返回一个元素而不是 HtmlCollection，这意味着它会在遇到的第一个返回。
@Domenico 把它写成答案，而不是评论。
if 语句看起来有点古怪。 ... 的类值甚至可以工作吗？忽略 className 返回分配给该元素的所有类。这意味着您将在第一次使用后获得selectbox-ul-child expanded，因此您的 if 语句应该不起作用。

标签： javascript html

【解决方案1】：

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

您可以尝试将“触发器”类分配给每个跨度而不是 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);
}

【讨论】：

【解决方案2】：

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

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

【讨论】：