Javascript 获取已单击元素的ID

我有7个

元素，当我点击某人时，我想记录ID的名称，这是有效的，但只针对第一个元素，并且总是提醒

选项卡1

，当点击

选项卡5

时它不起作用，嗯，有什么问题吗

HTML

仅选择第一个匹配的元素。你必须选择所有元素。然后使用

forEach（）

逐个添加事件（

单击

）

工作代码示例：

document.querySelectorAll（'.tabs heading'）.forEach（函数（el）{
el.addEventListener（'click'，函数（）{
警报（this.id）；
});
});



表1


表2


表3


表4


表5


表6


表7


仅返回第一个匹配元素

您需要改为使用，并通过在获取的集合上循环来绑定事件侦听器


document.querySelectorAll（“.tabs标题”）
.forEach（项目=>{
item.addEventListener（'单击'，函数（））{
警报（this.id）；
})
});



表1


表2


表3


表4


表5


表6


表7


文档。querySelector
仅选择与查询匹配的第一个元素。您必须使用
querySelectorAll
并在所有元素上注册侦听器，或者使用事件委派在
ul
（或其他父级）级别处理它

使用
querySelectorAll
：


document.querySelectorAll（'.tabs heading'）.forEach（函数（li）{
li.addEventListener（'click'，function（））{
警报（this.id）；
});
});



表1


表2


表3


表4


表5


表6


表7


您只附加到了第一个元素。谢谢，效果很好，我将接受您的回答！
<div class="tabs is-fullwidth">
  <!-- Tabs navigation menu -->
  <ul>
    <li id="tab-1" class="tabs-heading is-active">
      Tab 1
    </li>
    <li id="tab-2" class="tabs-heading">
      Tab 2
    </li>
    <li id="tab-3" class="tabs-heading">
      Tab 3
    </li>
    <li id="tab-4" class="tabs-heading">
      Tab 4
    </li>
    <li id="tab-5" class="tabs-heading">
      Tab 5
    </li>
    <li  id="tab-6" class="tabs-heading">
      Tab 6
    </li>
    <li  id="tab-7" class="tabs-heading">
      Tab 7
    </li>
  </ul>
</div>

document.querySelector('.tabs-heading').addEventListener('click', function() {
    alert(this.id);
});