jquery toggleClass 只改变一次

Question

我正在用 jQuery 制作幻灯片。我正在使用 jquery ui 图标作为播放/暂停按钮等。所以我有这段代码:

$(function(){
    $(".controls").hide(); //Hide controls

    $(".slider").hover(function(){
        $(".controls").fadeIn(500);
    }, function(){
        $(".controls").fadeOut(500);
    }); // show controls on hover

    $(".play").click(function(){
        $(".slider").attr({'data-running' : 'true', 'data-paused' : 'false'});
        $(this).toggleClass("ui-icon-play ui-icon-pause play pause");
    });

    $(".pause").click(function(){
        $(".slider").attr({'data-running' : 'false', 'data-paused' : 'true'});
        $(this).toggleClass("ui-icon-play ui-icon-pause play pause");
    }); //Add play/pause functionality

}); 

HTML:

<div class="slider-wrap">
<div class="slider" data-running="false" data-paused="true">
    <img class="starter-img" src="http://images.freeimages.com/images/previews/e16/tree-1533498.jpg" />
    <a href="http://labs.blogs.com/.a/6a00d8341caed853ef016768796ee4970b-pi" role="img-data"></a>
    <a href="http://www.successconnections.com/articles/wp-content/uploads/2013/04/technology.jpg" role="img-data"></a>
    <span class="controls">
        <span class="ui-icon ui-icon-circle-triangle-w prev control"></span>
        <span class="ui-icon ui-icon-play play control"></span>
        <span class="ui-icon ui-icon-circle-triangle-e seek-for control">
    </span>
</div>
</div>

我第一次点击播放按钮时，它会将 data-running 属性切换为 true，将 data-paused 属性切换为false，它是 ui-icon-pause pause 的自己的类，因为它应该如此。但是当我再次点击它时，它自己的类发生了变化，但是 data-running 和 data-paused 没有改变。为什么不进行属性更改？ <强> FIDDLE

Answer 1

$(".pause") 在翻转类时不绑定(bind)。它只会及时找到当时存在的元素。使用事件委托(delegate)或在处理两种状态的一次单击中添加逻辑。

事件委托(delegate):

$(".controls").on("click", ".play", function(){
    $(".slider").attr({'data-running' : 'true', 'data-paused' : 'false'});
    $(this).toggleClass("ui-icon-play ui-icon-pause play pause");
});

$(".controls").on("click", ".pause", function(){
    $(".slider").attr({'data-running' : 'false', 'data-paused' : 'true'});
    $(this).toggleClass("ui-icon-play ui-icon-pause play pause");
}); //Add play/pause functionality

最好一次完成，因为代码 95% 相同

$(".controls").on("click", ".play", function(){
    $(this).toggleClass("ui-icon-play ui-icon-pause play pause");
    var isPaused = $(this).hasClass("pause");
    $(".slider").attr({'data-running' : !isPaused, 'data-paused' : isPaused});
});