如何让查询选择器与具有相同类名的多个元素一起使用？ [复制]答案

【问题标题】：How to get queryselector to work with multiple elements with the same classname? [duplicate]如何让查询选择器与具有相同类名的多个元素一起使用？ [复制]
【发布时间】：2021-12-19 12:29:10
【问题描述】：

    let myvariable = document.querySelectorAll('.my-button');
    
    myvariable.addEventListener('click', function (e) {
      var button = e.target;
      
      if (button.getAttribute('data-reset') === 'true') {
        // Reset the filters
        var filter = button.getAttribute('data-filter');
        resetFilter(filter);
      } else {
        // Filter the tag
        var filter = button.getAttribute('data-filter');
        var tag    = button.getAttribute('data-filter-tag');
        filterTag(filter, tag);
      }
    });

这就是我所拥有的。

我有多个我的按钮，如下所示：

    <button class="my-button"></button> <-- works
    <button class="my-button"></button> <-- does not work
    <button class="my-button"></button> <-- does not work

我希望所有这些都成为addEventListener 的目标。问题？只有第一个按钮起作用，其余的似乎不起作用。

我做错了什么？

注意，我也试过getElementsByClassName。但这也失败了……

【问题讨论】：

这能回答你的问题吗？ addEventListener on a querySelectorAll() with classList
我尝试添加一个 foreach，但也失败了......也许我做错了？它给我每种类型的不同错误。
@Johan 你能用.forEach()展示你的尝试吗？当前代码崩溃并且不执行您所描述的操作（没有按钮工作）

标签： javascript html

【解决方案1】：

使用forEach将事件监听器附加到所有按钮

这样试试

Array.from(document.querySelectorAll('.my-button')).forEach(item => {
    item.addEventListener('click', function(e) {
        var button = e.target;

        if (button.getAttribute('data-reset') === 'true') {
            // Reset the filters
            var filter = button.getAttribute('data-filter');
            resetFilter(filter);
        } else {
            // Filter the tag
            var filter = button.getAttribute('data-filter');
            var tag = button.getAttribute('data-filter-tag');
            filterTag(filter, tag);
        }
    });
});

【讨论】：

如果我选择另一个按钮，有没有办法让它“未点击”？现在，如果我单击一个按钮并想选择另一个按钮，所有结果都消失了......