javascript - 在 Javascript 中将类添加到下一个兄弟元素

Question

如何添加切换类？当我单击 anchor 标记时，它应该仅将类添加到下一个同级元素( .treeUlChild )。我尝试了很多并试图找到解决方案但不能。我是新手，这是我在 javascript 中的第一个项目。这是我的 html 代码。

    <div id="treeList" class="treeDiv">
    <ul class="treeUl">
        <li>
            <a href="#">GUIDELINES</a>
            <ul class="treeUlChild treeLevel2">
                <li><a href="#"> Guidlines 1</a></li>
                <li><a href="#"> Guidlines 2</a></li>
                <li><a href="#"> Guidlines 3</a></li>
                <li><a href="#"> Guidlines 4</a></li>
            </ul>
            <!-- End Child Ul -->
        </li>
        <li>
            <a href="#">AFTER-SALES</a>
            <ul id="test" class="treeUlChild treeLevel2">
                <li><a href="#">xyz</a></li>
                <li>
                    <a href="#">def</a>
                    <ul class="treeUlChild treeLevel3">
                        <li>
                            <a href="#">  ASSETS</a>
                            <ul class="treeLevel4">
                                <li><a href="#">DIGITAL</a></li>
                                <li><a href="#">OOH</a></li>
                                <li><a href="#">POS</a></li>
                                <li><a href="#">PRINT</a></li>
                                <li><a href="#">SOCIAL GIF</a></li>
                                <li><a href="#">SOCIAL VIDEOS</a></li>
                            </ul>
                            <!-- End Child Ul -->
                        </li>
                    </ul>
                    <!-- End Child Ul -->
                </li>
            </ul>
            <!-- End Child Ul -->
        </li>
    </ul>
    <!-- End treeUl -->
</div>

这是我的 javascript 代码。

document.querySelector('#treeList ul li a').addEventListener("click", function(){
    document.querySelector('.treeUlChild').nextSibling.classList.toggle('done');
});

Answer 1

一个问题是 nextSibling 返回一个节点对象，最好使用 nextElementSibling 返回一个元素节点。另一个问题是 querySelector 将始终返回具有指定选择器的第一个元素，因此无论您单击哪个链接，更改将始终反射(reflect)在同一元素上。您可能更愿意使用 querySelectorAll，它将所有元素作为节点列表返回，并遍历每个元素并应用更改。另一件事是，最好使用 event.target 来获取被点击的元素，而不是再次使用选择器。

document.querySelectorAll('#treeList ul li a').forEach(elem => elem.addEventListener("click", function(){
    event.target.nextElementSibling.classList.toggle('done');
}));