Question

大家好，

我想通过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);
});

Answer 1

查看the documentation中的querySelector：

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

如果要匹配多个元素，则需要使用querySelectorAll，并且因为it doesn't return a single element在结果中循环。

或者，您可以使用event delegation。

Answer 2

您需要使用html, body, div { height: 100%; width: 100%; padding: 0; margin: 0; } div { overflow: hidden; position: relative; } section { position: absolute; top: -100%; height: 5000vw; width: 5000vh; background: #ccc; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; } section + section { background: #666; top: 0%; } section div { display: block; width: 100%; height: 100%; cursor: pointer; }来返回一个集合。现在使用querySelectorAll（三个点）将其转换为数组，然后使用spread operator。在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>来启用该按钮

Answer 3

需要使用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。我曾经用过

const breakdownButton = document.querySelectorAll('.breakdown');
breakdownButton.forEach(function(i) {
  i.addEventListener('click', function() {
    console.log();
  });
   });

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

3 个答案: