獲取單擊的元素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 ）。

工作代碼示例：

 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> 

Answer 2

document.querySelector僅返回第一個匹配的元素 。

您需要改用document.querySelectorAll並通過循環獲取的集合來綁定事件偵聽器。

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

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>