Question

为什么这不起作用？我绝对疯了。

            <span class="fav"></span>

            $('.fav').on('click', function() {
                $(this).addClass('item-selected');
            });

            $('.fav.item-selected').on('click', function() {
                $(this).removeClass('item-selected');
            });

以下是完整的代码。这是第二部分不会撤消。

        $('.fav').on('click', function() {
            $(this).addClass('item-selected').next('span.notification').toggleClass('show-notification').html("Hello world!");
            setTimeout(function(){
                $('.show-notification').removeClass('show-notification');
            },4000);
        });

        $('.fav.item-selected').on('click', function() {
            $(this).removeClass('item-selected').next('span.notification').toggleClass('show-notification').html("Goodbye world!");
            setTimeout(function(){
                $('.show-notification').removeClass('show-notification');
            },4000);
        });

Answer 1

当您声明.fav元素动态附加到DOM时，您需要使用委托事件处理程序。另请注意，当您在连续点击时切换课程时，您不需要多个处理程序;你可以使用toggleClass()。试试这个：

＆＃13;

$('#container').on('click', '.fav', function() {
  $(this).toggleClass('item-selected');
});

＆＃13;

.item-selected {
  color: #C00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <span class="fav">Item</span>
  <span class="fav">Item</span>
  <span class="fav">Item</span>
  <span class="fav">Item</span>
</div>

＆＃13;

Answer 2

这是第二部分不会撤消。

这是因为你的选择器.fav.item-selector没有返回元素

试试这个

 $('.fav').on('click', function() {
      if($(this).hasClass('item-selected')) {
      $(this).removeClass('item-selected').next('span.notification').toggleClass('show-notification').html("Goodbye world!");
        setTimeout(function(){
            $('.show-notification').removeClass('show-notification');
        },4000); 
      }
   });

Answer 3

因为类span的{{1}}不是原始DOM的一部分，这是jQuery的工作原理。你需要让它更具活力：

HTML：

item-selected

jQuery的：

<span class="fav target-click"></span>

Answer 4

这是工作代码，这要归功于所提供答案中的帮助。

            $(".job-listings").on('click', '.fav', function() {
                $(this).addClass('item-selected').next('span.notification').addClass('show-notification').html("Hello world!");
                setTimeout(function(){
                    $('.show-notification').removeClass('show-notification');
                },1000);
            });

            $(".job-listings").on('click', '.fav.item-selected', function() {
                $(this).removeClass('item-selected').next('span.notification').addClass('show-notification').html("Goodbye world!");
                setTimeout(function(){
                    $('.show-notification').removeClass('show-notification');
                },1000);
            });

Answer 5

        function callBindEvents()
        {
           $('.fav').unbind('click');
           $('.fav').bind('click', function() {
              $(this).addClass('item-selected');
              callBindEvents();
           });

           $('.fav.item-selected').unbind("click");
           $('.fav.item-selected').bind('click', function() {
               $(this).removeClass('item-selected');
               callBindEvents();  
           });
       }
       $( document ).ready(function() {
        callBindEvents();
      })

当你第一次添加onclick事件时，fav.item-selected不存在。它是在稍后添加的，因此您需要在将该类添加到div之后编写onclick事件。

为什么这个添加和删除类不能在JQuery中工作？

5 个答案: