javascript - 获取点击元素的 ID Vanilla JS

Question

我有 7 <li>元素，当我点击某人时，我想记录 ID 的名称，这是有效的，但仅适用于第一个元素，并且始终提醒 tab-1 ，当点击tab-5时它不起作用，嗯，那里有什么问题

HTML

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

JS

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

Answer 1

querySelector()仅选择第一个匹配的元素。您必须选择所有带有 querySelectorAll() 的元素。然后使用forEach()一一添加事件(click)。

工作代码示例:

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

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