javascript - 使用 jquery 删除/添加类后 Onclick 不起作用

Question

我想了解为什么此代码仅适用于第一次 onclick:

html:

    <div id="TheCarouselPlay">
        <button type="button" class="btn btn-warning btn-xs pause">
            <i class="fa fa-pause"></i>
        </button>
    </div>

js:

/* pause & play */
$('#TheCarouselPlay button.pause').click(function () {
    $('#TheCarouselPlay i').removeClass('fa-pause').addClass('fa-play');
    $(this).removeClass('pause').addClass('play');
});
$('#TheCarouselPlay button.play').click(function () {
    $('#TheCarouselPlay i').removeClass('fa-play').addClass('fa-pause');
    $(this).removeClass('play').addClass('pause');
});

http://jsfiddle.net/W59Me/4/

Answer 1

这可以通过一键单击处理程序来完成，根据按钮当前具有的类检查当前状态:

$('#TheCarouselPlay button').click(function () {
    if($(this).hasClass('play')){
      $('#TheCarouselPlay i').removeClass('fa-play').addClass('fa-pause');
      $(this).removeClass('play').addClass('pause');
    } else{
      $('#TheCarouselPlay i').removeClass('fa-pause').addClass('fa-play');
      $(this).removeClass('pause').addClass('play'); 
    }
});

这是 fiddle :http://jsfiddle.net/gW2pn/