javascript - 想要在具有相同类的多个元素上添加 "addEventListener"

标签 javascript html addeventlistener dom-events event-listener

<分区>

我想通过 jS 中的事件监听器执行“onClick”中的逻辑，但它似乎只运行一次？我在所有四个类(class)都有，但我不明白为什么它似乎只对第一个类(class)有效？

HTML:

<button id='btn-1' type="button" name="first" class="breakdown main-text" onclick="enableButton('btn-2');disableButton('btn-1');show('btn-1')"> Breakdown Start </button>
<button id='btn-2' type="button" name="second" class="breakdown main-text" onclick="enableButton('btn-3');disableButton('btn-2');show('btn-2')" disabled> Repair Start </button>
<button id='btn-3' type="button" name="third" class="breakdown main-text" onclick="enableButton('btn-4');disableButton('btn-3');show('btn-3')" disabled> Repair End </button>
<button id='btn-4' type="button" name="fourth" class="breakdown main-text" onclick="show('btn-4')" disabled> Breakdown Ended </button>

JS:

let button1 = document.querySelector('#btn-1')
let button2 = document.querySelector('#btn-2');
let button3 = document.querySelector('#btn-3');
let button4 = document.querySelector('#btn-4');


const breakdownButton = document.querySelector('.breakdown');
breakdownButton.addEventListener('click', function() {
console.log(this.innerHTML);
});

最佳答案

您需要使用 querySelectorAll 它将返回一个集合。现在使用 spread 运算符(三个点)将其转换为数组并使用 forEach .在 forEach 回调中添加事件监听器

[...document.querySelectorAll('.breakdown')].forEach(function(item) {
  item.addEventListener('click', function() {
    console.log(item.innerHTML);
  });
   });

<button id='btn-1' type="button" name="first" class="breakdown main-text"> Breakdown Start </button>
<button id='btn-2' type="button" name="second" class="breakdown main-text" disabled> Repair Start </button>
<button id='btn-3' type="button" name="third" class="breakdown main-text" disabled> Repair End </button>
<button id='btn-4' type="button" name="fourth" class="breakdown main-text" disabled> Breakdown Ended </button>

在您的代码段中，您还附加了内联事件处理程序，这可能不是必需的。

如果目标是启用下一个按钮，那么可以从事件处理程序的回调函数中调用一个函数来启用它

关于javascript - 想要在具有相同类的多个元素上添加 "addEventListener"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51573435/

上一篇：javascript - 将嵌套对象的每个对象的索引设置为属性

下一篇：javascript - GLTF 索引计数与缓冲区大小错误相同

javascript - React 编译失败。找不到模块 : Can't resolve, 如何使用react-router进行编译？

javascript - 如何在 Canvas 圆上附加jquery单击事件处理程序以显示弹出框

javascript - 如何使用 CSS 将 HTML 元素干净地放在同一行

javascript - 使用 Angular 5 的 EventListener 不会更新 DOM

javascript - 延迟事件监听器

javascript - 在 Mapbox gl js 中突出显示(更改颜色)道路、人行道或自行车道

javascript - "FLEX JS"可以像js插件一样使用吗

javascript - 如何在监听调整大小事件时设置我的状态一次

javascript - 加载失败，因为找不到支持的源