Question

我在StackOverFlow中找不到任何这样的问题（如果我错过了，请原谅我！）。

下面的代码搞砸了我。请注意，这是为了恢复/暂停动画。

$(function() {
    $('.slider').css("animation-play-state", "running");
    var animVar = $('.slider').css("animation-play-state"); //animVar === "running" and on next click, it gets updated to "paused"
    $('.slider').click(function() {
            $(this).css("animation-play-state", function() {
                if (animVar === "running") {
                    return "paused"; //returns "paused" to the function and the css property gets updated, overriding the one at the first line, changing the animVar on the next line.
                    } else {
                    return "running"; //returns "running" to the function and the css property gets updated, overriding the one at the first line, changing the animVar on the next line.
                }   
            }); 
    }); 
});

问题是，如果我不在if / else语句中更新animVar，则代码无法正常工作。相反的是，一旦我点击它，它会暂停，并且在连续点击后，它不会恢复。

但是如果我在{/ 1}}之类的if / else语句中更新animVar，它可以正常工作。

我的问题是，首先我将动画播放状态设置为“正在运行”。

将animVar设置为'running'。

满足if条件且动画按预期“暂停”。

但是这也应该覆盖顶部的animVar = "running"/"paused"并将animVar重置为'paused'，以便在下次单击时，不满足if条件并执行else语句，从而切换游戏在点击之间运行和暂停之间的状态。

显然，我的逻辑在某处出错了。有人可以让我明白吗？我的意思是，内部函数是一个闭包，所以它应该能够访问和更新外部函数的变量，对吗？

这是另一回事。如果每次点击，浏览器都会从顶部读取它，因此，每次将播放状态重置为“正在运行”，如果/ else工作，如何更新animVar？每次浏览器重新读取整个函数时，它都会被覆盖。

请帮帮我。

Answer 1

如果我理解正确，你试图在＆＃34;运行＆＃34;之间切换。和＆＃34;暂停＆＃34;作为动画播放状态属性的值？

见下文。

＆＃13;

$(function() {
  $(".slider").click(function() {
    var sliderClass = $(".slider").css("animation-play-state");
    if(sliderClass == "running") {
      $('.slider').css("animation-play-state", "paused");
      console.log("running");
    } else {
      $(".slider").css("animation-play-state", "running");
      console.log("paused");
    }
  })
});

＆＃13;

.slider {
animation-play-state: running; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider"> hallo </div>

＆＃13;

理解jQuery事件背后的逻辑

1 个答案: