为什么我的切换只在第一次起作用？

Question

我的切换功能都很好，但只是第一次。有什么问题吗？

$(".add-to-list").click(function(){ 
 $(this).removeClass( "appear" );      
 $(this).addClass( "is-on-list appear" );    
 $(this).removeClass( "add-to-list" );         
});

$(".is-on-list").click(function(){   
 $(this).removeClass( "appear" );     
 $(this).addClass( "add-to-list appear" );     
 $(this).removeClass( "is-on-list" );      
});

Answer 1

试试这个代码：

var selector = 'button';

$(selector).on('click', function(){
    $(this).toggleClass('active');
});

.active{color:green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="add-to-list">Hi</button>
<button class="is-on-list">there</button>

Answer 2

由于您仅使用该 .click 代码初始化 .click 侦听器一次，因此您第二次单击将无法正常工作。

因为代码只绑定了class上的监听器一次。

如果您要在动态添加的元素上设置侦听器，请像这样使用它

$(document).on('click', '.add-to-list', function(){ 
 $(this).removeClass( "appear" );      
 $(this).addClass( "is-on-list appear" );    
 $(this).removeClass( "add-to-list" );         
});

$(document).on('click', '.is-on-list', function(){   
 $(this).removeClass( "appear" );     
 $(this).addClass( "add-to-list appear" );     
 $(this).removeClass( "is-on-list" );      
});

为什么我的切换只在第一次起作用？

Why does my toggle only work the first time?

jquery

toggle