Javascript 理解jQuery事件背后的逻辑

我在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，代码就无法工作。现在发生的是，一旦我点击它，它会暂停，连续点击，它不会继续

但是如果我确实在if/else语句中更新了animVar，比如

animVar=“running”/“paused”

，它可以正常工作

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

这将animVar设置为“running”

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

但这也应该覆盖

$（'.slider'）.css（“动画播放状态”，“运行”）并将animVar重置为“暂停”，以便在下一次单击时，if条件不满足，执行else语句，从而在运行和单击时暂停之间切换播放状态

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

还有一件事。如果每次单击时，浏览器都从顶部读取，因此每次都将播放状态重置为“正在运行”，那么If/else中的animVar更新将如何工作？每次浏览器重新读取整个函数时，它都会被覆盖

请帮助我。
如果我理解正确，您正在尝试将“运行”和“暂停”作为动画播放状态属性的值进行切换

见下文


$（函数（）{
$（“.slider”）。单击（函数（）{
var sliderClass=$（“.slider”）.css（“动画播放状态”）；
如果（滑块类==“正在运行”）{
$（'.slider'）.css（“动画播放状态”，“暂停”）；
控制台日志（“运行”）；
}否则{
$（“.slider”）.css（“动画播放状态”、“运行”）；
控制台日志（“暂停”）；
}
})
});
滑块{
动画播放状态：运行；
}

您好
如果我理解正确，您正在尝试将“运行”和“暂停”作为动画播放状态属性的值进行切换

见下文


$（函数（）{
$（“.slider”）。单击（函数（）{
var sliderClass=$（“.slider”）.css（“动画播放状态”）；
如果（滑块类==“正在运行”）{
$（'.slider'）.css（“动画播放状态”，“暂停”）；
控制台日志（“运行”）；
}否则{
$（“.slider”）.css（“动画播放状态”、“运行”）；
控制台日志（“暂停”）；
}
})
});
滑块{
动画播放状态：运行；
}

您好
请阅读：。没有人会为了计算代码而重新键入代码。你需要发布真实的代码，而不是代码的图片。如果你想让我们知道一些关于代码的事情，这就是评论的目的，而不是在代码图片上涂鸦红色手写文本。不要将屏幕截图作为代码发布-请在问题中发布代码并添加它。我有一种潜在的怀疑，即图片中的代码不是正在运行的代码<代码>animVar
只运行一次，从不更新。说
$（this）.css（…）
也永远不会更新animVar。我感觉你的点击处理程序中有
var animVar=…
assignment语句，而它应该在外部。当然，按照建议执行：-）@mhodges这是我正在运行的代码。这是我的建议。问题是，为什么在我更改click（）中的CSS属性时，它不会得到更新？它在幕后进行的过程是什么？请阅读：。没有人会为了计算代码而重新键入代码。你需要发布真实的代码，而不是代码的图片。如果你想让我们知道一些关于代码的事情，这就是评论的目的，而不是在代码图片上涂鸦红色手写文本。不要将屏幕截图作为代码发布-请在问题中发布代码并添加它。我有一种潜在的怀疑，即图片中的代码不是正在运行的代码<代码>animVar
只运行一次，从不更新。说
$（this）.css（…）
也永远不会更新animVar。我感觉你的点击处理程序中有
var animVar=…
assignment语句，而它应该在外部。当然，按照建议执行：-）@mhodges这是我正在运行的代码。这是我的建议。问题是，为什么在我更改click（）中的CSS属性时，它不会得到更新？它在幕后进行的过程是什么？是的，我是。在我的代码中，即使CSS play state属性得到更新，animVar也不会得到更新。这就是问题所在。因为你从不改变变量的值？在onClick事件上方声明一次，之后我看不到更改变量的代码。但是我想说的是，你一开始不需要变量，对了，知道了，谢谢。这是一个优雅的代码顺便说一句。选择它作为答案。是的，我是。在我的代码中，即使CSS play state属性得到更新，animVar也不会得到更新。这就是问题所在。因为你从不改变变量的值？在onClick事件上方声明一次，之后我看不到更改变量的代码。但是我想说的是，你一开始不需要变量，对了，知道了，谢谢。顺便说一句，这是一个优雅的代码。选择它作为答案。