当我单击具有相同类的列表中的按钮时，在顶部元素中添加类 - Jquery

Posted 2023-05-09

【中文标题】当我单击具有相同类的列表中的按钮时，在顶部元素中添加类 - Jquery

【英文标题】：Add class in the top element when i click on button in a list with the same classes - Jquery

【发布时间】：2018-02-25 13:10:09

【问题描述】：

当我单击一个项目的按钮 btn-top-heart 时，我必须将类添加到面板标题 .heart-right，但只有单击按钮的单个框的 .heart-right 项目。 我不熟悉jquery，我什至不知道它是否可能。我不会为每个#div 使用 .click 函数

$(".btn-top-heart").click(function() 
  $(".heart-right").addClass('red');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <h4 class="panel-title">
      Test 1
      <span class="heart-right"><i class="fa fa-heart" aria-hidden="true"></i></span>
    </h4>
    <button class="btn-top-heart">
      <a href="mailto:[e-mail]">Sell</a>
    </button>
  </li>
  <li>
    <h4 class="panel-title">
      Test 2
      <span class="heart-right"><i class="fa fa-heart" aria-hidden="true"></i></span>
    </h4>
    <button class="btn-top-heart">
      <a href="mailto:[e-mail]">Sell</a>
    </button>
  </li>
  <li>
    <h4 class="panel-title">
      Test 3
      <span class="heart-right"><i class="fa fa-heart" aria-hidden="true"></i></span>
    </h4>
    <button class="btn-top-heart">
      <a href="mailto:[e-mail]">Sell</a>
    </button>
  </li>
  <li>
    <h4 class="panel-title">
      Test 4
      <span class="heart-right"><i class="fa fa-heart" aria-hidden="true"></i></span>
    </h4>
    <button class="btn-top-heart">
      <a href="mailto:[e-mail]">Sell</a>
    </button>
  </li>
  <li>
    <h4 class="panel-title">
      Test 5
      <span class="heart-right"><i class="fa fa-heart" aria-hidden="true"></i></span>
    </h4>
    <button class="btn-top-heart">
      <a href="mailto:[e-mail]">Sell</a>
    </button>
  </li>
</ul>

有人可以帮助我:)

【参考方案1】：

此代码将起作用：

$('.btn-top-heart').click(function() 
    $(this).closest('li').find('.heart-right').addClass('red');
);