需要帮助从 javascript 中的点击函数获取值

Question

所以我在从我的按钮中获取 ID 时遇到了问题。我的代码仅 return 从第一个 tic 按钮获取 id 值，而不是当我单击它们时的其余部分。

这里是 HTML:

<div class="row">
    <div class="col-lg-12">
        <a class="btn btn-lg btn-primary tic" id="0">#</a>
        <a class="btn btn-lg btn-primary tic" id="1">#</a>
        <a class="btn btn-lg btn-primary tic" id="2">#</a>
    </div>
</div>

这里是 javascript:

const tick = document.querySelector('.tic');

tick.addEventListener('click', () =>{
    var slot = tick.id;
    console.log(slot);
});

当我点击第一个按钮时它只有 returns 0 但当我点击第二个按钮时它不会 return1。相反，它什么都不做。任何帮助都会很棒。谢谢

Answer 1

querySelector returns 第一个元素。

相反，使用 querySelectorAll 到 select 所有元素，遍历每个元素并添加一个 click 事件侦听器：

const tick = document.querySelectorAll('.tic');

tick.forEach(e => {
  e.addEventListener('click', () => {
    var slot = e.id;
    console.log(slot);
  });
})

<div class="row">
  <div class="col-lg-12">
    <a class="btn btn-lg btn-primary tic" id="0">#</a>
    <a class="btn btn-lg btn-primary tic" id="1">#</a>
    <a class="btn btn-lg btn-primary tic" id="2">#</a>
  </div>
</div>

或者，更好的是，使用事件委托：

document.body.addEventListener('click', function(e) {
  if (e.target.classList.contains("tic")) {
    console.log(e.target.id);
  }
})

<div class="row">
  <div class="col-lg-12">
    <a class="btn btn-lg btn-primary tic" id="0">#</a>
    <a class="btn btn-lg btn-primary tic" id="1">#</a>
    <a class="btn btn-lg btn-primary tic" id="2">#</a>
  </div>
</div>

需要帮助从 javascript 中的点击函数获取值

need help getting values from a click function in javascript

html

javascript

click