Question

我试图摆脱jQuery和简单的JavaScript，而我却无法理解如何做某事。我想要一个非常灵活的脚本，允许多个按钮切换相同的菜单。起初，我有这个：

OutputStream

但在考虑之后，我意识到这可能会让菜单和按钮失去同步。所以现在我的计划是同步按钮和菜单的所有实例，例如当您单击一个按钮时，具有相同// 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类同步？

Answer 1

尝试类似：

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

Answer 2

您想使用querySelectorAll：

var elems = document.querySelectorAll("[data-menu=" + target_menu + "]");

for (var i = 0; i < elems.length; ++i) {
  elems[i].toggleClass("is-active");
}

这与querySelector相同，但它返回所有实例而不仅仅是第一个

Answer 3

请检查querySelectorAll

返回文档中元素的列表（使用depth-first 与指定匹配的文档节点的预订遍历）选择者组。返回的对象是NodeList。

将类添加到与JavaScript中的给定数据集匹配的所有元素

3 个答案: