Question

所以我遇到了一些问题，我觉得应该很简单。

为了简单起见，我编写了这个例子：我首先在更大的代码中注意到了这个问题。但问题仍然存在。

<!DOCTYPE html>
<html>
<head>
<style>
#test
{
    height: 300px;
    width: 300px;
    background: blue;
    position:absolute;
    top: 0px;
    left: 0px;
}

</style>
</head>
<body>
<div id="test"></div>
<script src='jquery-1.10.2.min.js'>
</script>
<script>
var isClicked = false;
$(document).ready(function(){
    $('#test').click(function(){
        isClicked = true;
    });
    if (isClicked == true)
    {
        $('#test').animate({top:'200px'});
    }
});
</script>
</body>
</html>

动画没有播放......显然，同样的任务可以通过更简单的方式完成，但我仍然不明白为什么变量不起作用。可能只是一个愚蠢的错字 - 但也许不是。

感谢您的帮助！

Answer 1

您对isClicked的测试是在dom准备就绪时进行的，此时您尚未点击。

您应该在点击处理函数中移动代码。

Answer 2

加载DOM时，isClicked的值为'false'。由于值为false，因此不会发生动画。用这样的方式改变你的JS：

$(document).ready(function () {
    var isClicked = false;
    $('#test').on('click', function (event) {
        isClicked = !isClicked;
        if (isClicked) {
            $(this).animate({top: '200px'});
        }
    });
});

麻烦简单（？）jquery / javascript变量

2 个答案: