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'); 
    }
});

这是小提琴：http://jsfiddle.net/gW2pn/

Answer 2

尝试使用事件处理程序：

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

这是新的小提琴： http://jsfiddle.net/xe79K/

Answer 3

你必须使用on（）

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

因为在定义click事件时button.play不存在。

Answer 4

setTimeout函数可以解决这个问题。这是一个例子：

    setTimeout(function(){
       $(this).removeClass('play').addClass('pause');
    }, 100);

使用jquery删除/添加类后，Onclick无法正常工作

4 个答案: