获取点击元素Vanilla JS的ID

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

工作代码示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

document.querySelector仅返回第一个匹配元素。

您需要使用document.querySelectorAll代替并通过循环获取的集合来绑定事件侦听器。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

使用querySelectorAll：

document.querySelectorAll('.tabs-heading').forEach(function(li) {
  li.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>

使用活动委派

document.querySelector('div.tabs ul').addEventListener('click', function(e) {
  var target = e.target;
  if (target.className.indexOf('tabs-heading') > -1) {
    alert(target.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>