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，并将其自己的类切换为{{ 1}}，应该如此。但是当我再次点击它时，它自己的类更改，但ui-icon-pause pause和data-running不会更改。为什么不进行属性更改？的 FIDDLE

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

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

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 of above in action. （＆lt;您实际上正在重置）

jquery toggleClass只更改一次

3 个答案: