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

Question

所以我有一个问题，从我的按钮的ID。我的代码只从第一个按钮返回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);
});

当我点击第一个按钮时它只返回0，但当我点击第二个按钮时它不返回1。相反，它什么也不做。任何帮助都太好了。由于

Answer 1

querySelector返回第一个元素。

相反，使用querySelectorAll来选择所有元素，循环遍历每个元素并添加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>