Question

如何按索引选择班级中的所有元素（或者......我不知道还有什么，只是学习js :)）但不是当前目标？为了避免这种情况 - ＆gt;

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

选择课堂上的所有元素，但不选择当前目标

1 个答案: