javascript - 在 JavaScript 中向与给定数据集匹配的所有元素添加类

Question

我正在尝试从 jQuery 转向纯 JavaScript，但我无法理解如何做某事。我想要一个非常灵活的脚本，允许多个按钮切换同一菜单。起初，我的工作是:

// function to add active classes on a menu and it's associated button
function toggle_menu() {
    var active_class = "is-active";
    var target_menu = this.dataset.menu;
    var button_class_list = this.classList;
    var menu_class_list = document.querySelector("[data-menu=" + target_menu + "]").classList;

    button_class_list.toggle(active_class);
    menu_class_list.toggle(active_class);
}

// fire toggle_menu when any menu-button is clicked
document.querySelector(".menu-button").addEventListener("click", toggle_menu);

但经过思考，我意识到这可能会导致菜单和按钮不同步。所以现在我的计划是同步按钮和菜单的所有实例，例如当您单击一个按钮时，具有相同 [data-menu] 的所有按钮都会切换到相同的状态。

但是我很困惑如何解决这个问题。我想如果我在哪里做类似的事情

document.querySelector("[data-menu=" + target_menu + "]").toggleClass("is-active");

它可以正常工作，但事实证明这只影响匹配元素的第一个实例，而不是所有匹配元素。

如何更改此设置，以便页面上具有相同 data-menu 属性的所有元素始终保持其 is-active 类同步？

Answer 1

尝试如下:

var selected = document.querySelectorAll("[data-menu=" + target_menu + "]");
Array.from(selected).forEach(function(item){
    item.classList.toggle("is-active");
}));