jquery - jquery onclick 函数在 addClass 下一次单击后制动

Question

点击元素添加playcss可以很好处理的类。通过下一次单击，我想删除该类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;
}

这是小提琴

Answer 1

那是因为在页面加载时'.small-player-icons.pause.play'文档中没有 class of 的元素，所以查询会静默失败，您必须委托事件：

$(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处理您.removeClass()的课程时，该play课程不存在。尝试类似：

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