通过使用Javascript单击不同的元素来更改元素的类

我相信这很简单，但我似乎找不到一个具体的例子

我试图通过使用Javascript单击带有类“js--I”的li元素，将类“ion-android-arrow-dropdown”更改为“ion-android-arrow-dropup”，反之亦然。这有多个实例

我必须循环子元素吗

HTML

---

选择元素having

js--i

class，听一听，点击并切换类：

document.querySelector(".js--i").addEventListener("click", function() {
    document.querySelector("i").classList.toggle("ion-android-arrow-up");
    document.querySelector("i").classList.toggle("ion-android-arrow-dropdown");
});

---

各种DOM API选择器函数在节点和文档上工作，因此您可以在

something here

块中使用icon.querySelector（'i'）或类似的东西来选择相关元素

document.querySelectorAll（'li'）.forEach（函数（li）{
li.addEventListener（'click'，function（））{
li.querySelector（'i'）.classList.toggle（'ion-android-arrow-dropup'）；
})
})

.ion安卓箭头下拉列表{
显示：内联块；
宽度：10px；
高度：10px；
背景色：红色；
}
.ion安卓箭头下拉列表{
背景颜色：蓝色；
}

我编辑了这个问题以反映这一点

.js--i

不控制任何东西，它只用于js。这是有效的，我以前做过，但一定是先删除了类，所以什么也没发生。@Dandan642，我认为如果页面上有多个

.js--i

元素，我认为这不起作用，我认为您指出会有。这是最好的，任何关于如何在课程改变后做相反事情的提示。我尝试了一个if-else语句，但它似乎会自动取消。当一个元素在两种状态之间切换时，通常最容易打开和关闭一个类，而不是在两个不同的类之间切换。我通常希望有一个始终在元素上的默认类和一个激活另一个状态的toggle类。我已经更新了代码片段来演示.Nvm，我把它放在了另一个foreach中。这个很好用，谢谢！很高兴你明白了

function arrowToggle(up, down, icon) {

    [].forEach.call(
        icon,
        function(icon) {
            icon.addEventListener('click', function() {
                console.log('test');

                /* Something here */

            }, false);
        }
    );           

}

arrowToggle(arrowUp, arrowDown, iconArrow);     

document.querySelector(".js--i").addEventListener("click", function() {
    document.querySelector("i").classList.toggle("ion-android-arrow-up");
    document.querySelector("i").classList.toggle("ion-android-arrow-dropdown");
});