时间戳

首页 > 解决方案 > 单击按钮后如何遍历 DOM 以获取特定元素

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>

当单击购物项目切换按钮时，我需要通过 jquery 访问具有类名的跨度：购物项目。我正在尝试通过 .close() 完成此操作，但尚未取得任何成功。它似乎没有像我期望的那样遍历 DOM。这是我一直试图无济于事的。

$('.shopping-item-toggle').on('click', function(event){

  $(event.currentTarget).closest('span').toggleClass('.shopping-item__checked')

})

我认为我的问题可能是使用 event.currentTarget。据我了解，这是单击的按钮元素，然后 .close() 应该从那里向上遍历 DOM 到最近的跨度，但这并没有发生。

标签： jquery

解决方案

你有正确的想法：当用户与之交互时使用“点击”事件监听器来监听，并根据 event.target 选择一个元素。

问题是 .closest() 似乎在寻找最近的父级，但 .shopping-item-toggle 不是 .shopping-item 的子级，而是 .shopping-item-controls 的子级。

<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'）或添加一个'shopping-item-container'（可以有任何名称）类并使用最接近（'shopping-item-container'）进行搜索。

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

推荐阅读