純JS——通過onlick事件動態獲取父DIV ID

Question

如何通過onclick事件獲取每個主 DIV 的 ID？

我需要在不使用onclick事件中的 static 名稱的情況下找到元素，例如示例document.getElementById('fruits'); .
我希望有一種方法可以在不使用子 DIV 上的 ID 的情況下以更動態的方式獲取每個頂級父 DIV fruits和animals的 ID。

<div id="fruits">

  <div class="class-container">
    <div class="class-controls">
      <button type="button" class="class-all" onclick="document.getElementById('fruits');">SELECT ALL</button>
    </div>

    <ul>
      <li><input type="checkbox" class="class-check" value="BANANA" onclick="document.getElementById('fruits');" />BANANA</li>
    </ul>
  </div>
  
</div>

<div id="animals">

  <div class="class-container">
    <div class="class-controls">
      <button type="button" class="class-all" onclick="document.getElementById('animals');">SELECT AL</button>
    </div>

    <ul>
      <li><input type="checkbox"class="class-check" value="DOG" onclick="document.getElementById('animals');" />DOG</li>
    </ul>
  </div>
  
</div>

Answer 1

我會使用el.closest ，其中el是您單擊的項目。 您可以將 class 添加到父元素，例如class="category"然后el.closest('.category').id 。

您可以在https://developer.mozilla.org/en-US/docs/Web/API/Element/closest查看更多信息