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

Question

我确信这很简单，但我似乎找不到具体的例子。

我正在尝试将'ion-android-arrow-dropdown'类更改为'ion-android-arrow-dropup'，反之亦然使用Javascript的类'js - i'的li元素。这有多个例子。

我是否必须遍历子元素？

HTML

<li class="js--i"><a href="#" id="sub-menu--parent-1">About Us
<i class="ion-android-arrow-dropdown"></i></a>

的Javascript

function arrowToggle(up, down, icon) {

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

                /* Something here */

            }, false);
        }
    );           

}

arrowToggle(arrowUp, arrowDown, iconArrow);     

Answer 1

选择具有js--i类的元素，听取点击和切换类：

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");
});

Answer 2

各种DOM API选择器函数可以在节点上和文档上工作，因此您可以在something here块中使用icon.querySelector（＆＃39; i＆＃39;）或类似的东西，选择相关元素。

＆＃13;

＆＃13;

document.querySelectorAll('li').forEach(function(li) {
  li.addEventListener('click', function() {
    li.querySelector('i').classList.toggle('ion-android-arrow-dropup');
  })
})

＆＃13;

.ion-android-arrow-dropdown {
display: inline-block;
width: 10px;
height: 10px;
background-color: red;
}

.ion-android-arrow-dropup {
background-color: blue;
}

＆＃13;

<li class="js--i"><a href="#" id="sub-menu--parent-1">About Us
<i class="ion-android-arrow-dropdown"></i></a></li>

<li class="js--i"><a href="#" id="sub-menu--parent-1">About Us
<i class="ion-android-arrow-dropdown"></i></a></li>

<li class="js--i"><a href="#" id="sub-menu--parent-1">About Us
<i class="ion-android-arrow-dropdown"></i></a></li>

<li class="js--i"><a href="#" id="sub-menu--parent-1">About Us
<i class="ion-android-arrow-dropdown"></i></a></li>

＆＃13;

＆＃13;

＆＃13;