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

- yaakov

Answer 1

$(".pause")在翻转类时不会绑定。它只能找到那个时刻存在的元素。要么使用事件委托，要么在处理两种状态的单击事件中添加逻辑。

事件委托：

$(".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});
});

- epascarello

---

是的，上次我检查时也无法标记它。不知道他们为什么这样做。 - yaakov

Answer 2

你的类应该像这样，暂停为播放，反之亦然

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

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

- Meenesh Jain

---

不，.play 是一个播放按钮，这意味着它已经暂停了。无论如何，这都不能解决我的问题。 - yaakov

如果是这样的话，把类和暂停按钮互换一下，它就可以工作了。 - Meenesh Jain

Answer 3

我想我遇到了这个问题。

"jQuery的Toggle存在问题，正如你所指出的，它会向元素添加内联样式，直到再次触发切换才会删除" -https://css-tricks.com/forums/topic/issue-with-jquery-slidetoggle-display-none/

您需要重置 .toggleClass 或使用 .addClass 和 .removeClass 来实现您的效果。

如果您不想为您的 .toggleClass 创建重置函数，也不想使用 .addClass / .removeClass，有时可以通过使用 setTimeout 函数来解决。 例如下面的简单示例：

$(document).ready(function(){
  $("button").click(function(){
    $(".wrap").toggleClass("fixed");

    setTimeout(function () {
      $('.wrap').toggleClass('shift')
    }, 20);

  });
});

上述代码在CodePen中的实际效果。 (您本质上是在重置)

- Coastal-Cam