javascript - 选择类中的所有元素，但不选择当前目标

Question

如何通过索引选择类中的所有元素(或者...我不知道别的，只是学习js:))但不是当前目标？为了避免这种情况 ->

var menu_page = document.getElementsByClassName('menu_page')[0];
var menu_btn = document.getElementsByClassName('menu_btn')[0];
var menu_list = document.getElementsByClassName('menu_list');
var menu_item = document.getElementsByClassName('menu_item');
var front = document.getElementsByClassName('front');
var back = document.getElementsByClassName('back');

document.addEventListener('DOMContentLoaded', function(){
    menu_page.classList.toggle('menu_page_out');
    menu_btn.classList.toggle('menu_btn_out');
});

menu_btn.addEventListener('click', function(){
    menu_page.classList.toggle('menu_page_out_full');
    menu_btn.classList.toggle('menu_btn_out_full');
    for (var a = 0; a < menu_item.length; a++) {
        menu_item[a].addEventListener('click', function(){
            this.classList.toggle("flipped");
            switch(this.id) {
                case 'a':
                    back[0].classList.toggle.("grow_2");
                    front[0].classList.toggle("grow_2");
                    menu_list[0].classList.toggle("grow");
                    front[1].classList.toggle("slide_left");
                    menu_list[1].classList.toggle("slide_left");
                    front[2].classList.toggle("slide_left");
                    menu_list[2].classList.toggle("slide_left");
                    front[3].classList.toggle("slide_left");
                    menu_list[3].classList.toggle("slide_left");
                break;
                case 'b':

                break;
                case 'c':

                break;
                case 'd':

                break;
            }
        });
    }
});

我想避免为每种情况输入类[索引号]。

Answer 1

假设您的示例中的 item_1 是 menu_list[0]，我认为您可能正在寻找:

menu_list.forEach(function(entry) {
    entry.classList.toggle(entry === this ? "slide_right" : "slide_left");
}, this);

循环遍历条目数组，切换类，根据this(当前条目)检查每个条目。请注意，我将 this 作为第二个参数传递给 forEach(在函数之后)，因此回调中的 this 与this 在它之外。

在 ES6 中，我会使用箭头函数来代替:

menu_list.forEach((entry) => {
    entry.classList.toggle(entry === this ? "slide_right" : "slide_left");
});