想要在具有相同类的多个元素上添加“addEventListener”

IT技术 javascript html addeventlistener dom-events event-listener
2021-03-04 14:19:38

我想通过 jS 中的事件侦听器执行“onClick”中的逻辑，但它似乎只运行一次？我在所有四个课程中都有课程，但我不明白为什么它似乎只适用于第一个？

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);
});
3个回答

您需要使用querySelectorAllwhich 将返回一个集合。现在使用spread operator（三个点）将其转换为数组并使用forEach.InsideforEach回调向其添加事件侦听器

[...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>

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

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

然而，它不能直接在getElementsByClassName不幸的结果上调用......
2021-04-22 14:19:38
真的有必要传播到数组中吗？forEach可以querySelectorAll在 Chrome 控制台中调用结果。
2021-05-10 14:19:38

看看文档为querySelector：

querySelector() 返回文档中与指定选择器或选择器组匹配的第一个元素。

如果要匹配多个元素，则需要使用querySelectorAlland，因为它不会 在结果上返回单个元素循环。

或者，您可以使用事件委托。

@NakulMalhotra — 在我链接到的问题中详细解释了事件委托的好处。
2021-05-13 14:19:38
谢谢！在某些情况下，一个比另一个更有value吗？
2021-05-20 14:19:38

需要使用querySelectorAll而不是querySelector. 并像这样迭代列表。

const breakdownButton = document.querySelectorAll('.breakdown');

// It add event listeners for the first button element. 
// you can use forloop or using map function to iterate for the list elements and here i used breakdownButton[0] as an example.

breakdownButton[0].addEventListener('click', function() {
  console.log(this.innerHTML);
});

使用迭代函数，如 forEach 或 map。我用了 forEach

const breakdownButton = document.querySelectorAll('.breakdown');
breakdownButton.forEach(function(btn) {
  btn.addEventListener('click', function() {
    console.log();
  });
});
[0]不遍历列表。它只需要其中的第一个元素。
2021-04-24 14:19:38
不，我们需要为我给出的示例中的按钮元素添加事件侦听器。
2021-04-28 14:19:38
（对不起，我不是要投票……试图取消）
2021-05-11 14:19:38
其它你可能感兴趣的问题
上一篇Google Visualization Charts API 示例已损坏，如何修复？ 下一篇getElementByClass().setAttribute 不起作用