Question

单击元素添加类play css可以很好地处理它。在下一次单击时，我想删除类play，而这只是不希望发生。

我做错了什么？我怎么能做得更好？

谢谢你

<span class="icon small-player-icons pause" style="display: inline;">click here</span>

$('.small-player-icons.pause').on('click',function(){
    $(this).addClass('play');
});
$('.small-player-icons.pause.play').on('click', function(){
    alert("clicked");
    $(this).removeClass('play');
});

span.small-player-icons.pause {
    background-color:green;
    padding:10px;
}
span.small-player-icons.play {
    background-color:orange;
}

Here is the fiddle

Answer 1

那是因为在页面加载时，文档中没有'.small-player-icons.pause.play'类的元素，因此查询无提示失败，您必须委派事件：

$(document).on('click', '.small-player-icons.pause.play', function(){
    alert("clicked");
    $(this).removeClass('play');
});

但是，由于您只使用2个处理程序来添加/删除类，为什么不使用toggleClass()方法？

$('.small-player-icons.pause').on('click',function(){
    $(this).toggleClass('play');
});

Answer 2

一个工作示例：

$('.small-player-icons.pause').on('click',function(){
    if($(this).hasClass('play')){
        alert("clicked");
        $(this).removeClass('play');
    }
    else{
        $(this).addClass('play');
    }
});

JSFiddle

Answer 3

当您创建处理click的{{1}} .removeClass()时，play类不存在。尝试类似：

$('.small-player-icons.pause').click(function(){
  $(this).addClass('play');
  $('.small-player-icons.pause.play').click(function(){
    alert("clicked");
    $(this).removeClass('play');
  });
});

点击addClass后，jquery onclick函数制动

3 个答案: