jquery 如何在单击内容时从内容中删除 class

Question

我想在点击图标时从心形图标中删除 classtext-danger 但我没有成功:

$(document).ready(function(){
  $('.blog-like-counter').on('click', function (e) {
    e.preventDefault();
    $(this).next('.heart-icon').removeClass('text-danger'); // remove red color heart icon  
  });
});

<div class="blog-like-counter">
    <p class="heart-icon text-danger">&#9829;</p>
</div>

https://jsfiddle.net/cp8ms2tu/1/

Answer 1

请使用 find 方法，因为 next 方法是获取下一个元素而不是内部元素

      $('.blog-like-counter').on('click', function (e) {
        e.preventDefault();
        $(this).find('.heart-icon').removeClass('text-danger'); // remove red color heart icon
      });

Answer 2

使用children方法也能解决问题 Next 获取下一个元素，而不是下一个 "child" 元素。

    $(document).ready(function(){
  $('.blog-like-counter').on('click', function (e) {
    e.preventDefault();
    $(this).children('.heart-icon').removeClass('text-danger'); // remove red color heart icon  
  });
});

jquery 如何在单击内容时从内容中删除 class

jquery how to remove class from content when click on content

jquery

click