纯JS-通过onlick事件动态获取父DIV ID

Question

如何通过onclick事件获取每个主div的ID？

我需要在不使用onclick事件中的静态名称的情况下找到元素，如示例document.getElementById('fruits');
我希望有一种方法可以在不使用子DIV上的ID的情况下，以更动态的方式获取每个顶级父DIVfruits和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="category"，然后添加el.closest('.category').id。

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

<div class="class-category" id="fruits">
<div class="class-container">
<div class="class-controls">
<button type="button" class="class-all" onclick="this.closest('.class-category').id">SELECT ALL</button>
</div>
<ul>
<li><input type="checkbox" class="class-check" value="BANANA" onclick="this.closest('.class-category').id" />BANANA</li>
</ul>
</div>
</div>
<div class="class-category" id="animals">
<div class="class-container">
<div class="class-controls">
<button type="button" class="class-all" onclick="this.closest('.class-category').id">SELECT ALL</button>
</div>
<ul>
<li><input type="checkbox" class="class-check" value="DOG" onclick="this.closest('.class-category').id" />DOG</li>
</ul>
</div>
</div>