Jquery 单击按钮后，如何遍历DOM以获取特定元素

我很难理解如何正确利用.close（）遍历DOM并更改特定元素

这是HTML

<li>
    <span class="shopping-item">apples</span>
    <div class="shopping-item-controls">
      <button class="shopping-item-toggle">
        <span class="button-label">check</span>
      </button>
      <button class="shopping-item-delete">
        <span class="button-label">delete</span>
      </button>
    </div>
  </li>

---

我想我的问题可能是使用event.currentTarget。据我所知，这是单击的button元素，然后.close（）应该从那里向上遍历DOM到最近的范围，但这并没有发生

您的想法是正确的：当用户与“click”eventListener交互时，使用“click”eventListener进行监听，并根据event.target选择一个元素

问题是，.closest（）似乎查找最近的父项，但是.shopping item toggle不是.shopping item的子项，而是.shopping item控件的子项

<li class="shopping-item-container">       <!-- Parent -->
    <span class="shopping-item">apples</span> <!-- NOT Parent -->
    <div class="shopping-item-controls">      <!-- Parent -->
      <button class="shopping-item-toggle">       <!-- event.target -->
        <span class="button-label">check</span>
      </button>
      <button class="shopping-item-delete">
        <span class="button-label">delete</span>
      </button>
    </div>
</li>

<li class="shopping-item-container">       <!-- Parent -->
    <span class="shopping-item">apples</span> <!-- NOT Parent -->
    <div class="shopping-item-controls">      <!-- Parent -->
      <button class="shopping-item-toggle">       <!-- event.target -->
        <span class="button-label">check</span>
      </button>
      <button class="shopping-item-delete">
        <span class="button-label">delete</span>
      </button>
    </div>
</li>

$('.shopping-item-toggle').on('click', function(event){
    $(event.currentTarget).closest('li').toggleClass('.shopping-item__checked')
});