为什么我的if/else JS语句使用jQuery不工作

Why is my if/else JS statement using jQuery not working?

本文关键字：jQuery 工作 语句 JS 我的 if else 为什么      更新时间：2023-09-26

我正在使用w3schools编辑器中的代码，该编辑器演示了一个jQuery动画函数。

我想尝试使这种移动可逆，所以我添加了一个if/else语句，以允许div移动回来，如果它已经被点击。

下面是我的脚本标签之间的代码:

var clicked = false;
$(document).ready(function(){
    $("button").click(function(){
        if (clicked == false){
            $("div").animate({
                left: amount,
                opacity: '0.5',
                height: '150px',
                width: '150px'
            });
            clicked = true;
        } else {
            $("div").animate({
                right: amount,
                opacity: '0.5',
                height: '150px',
                width: '150px'
            });
            clicked = false;
        }
    });
});

我知道可能有更好的方法来做到这一点，但我对jQuery相当陌生。在任何情况下，看到jQuery只是扩展JavaScript，这似乎很奇怪，这不起作用。

—update:更正amount未设置并包含完整的页面代码—

这是我的新代码。当再次点击div时，div仍然不会向后移动。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
var clicked = false;
$(document).ready(function(){
    $("button").click(function(){
        if (clicked == false){
            $("div").animate({
                left: '250px'
            });
            clicked = true;
        } else {
            $("div").animate({
                right: '250px'
            });
            clicked = false;
        }
    });
});
</script> 
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

失败是因为您没有设置amount !

var clicked = false;
var amount = 0;
$(document).ready(function(){
   //more code that calls `amount`
})

检查这个JSFiddle，看看它的作用:http://jsfiddle.net/1xt58q0a/1/

新的JSFIddle匹配更新的问题:http://jsfiddle.net/1xt58q0a/5/

可以使用.toggle()函数

$(document).ready(function(){
   $("button").toggle(
      function(){
         $("div").animate({
            left: amount,
            opacity: '0.5',
            height: '150px',
            width: '150px'
        });
     },
     function(){
        $("div").animate({
           right: amount,
           opacity: '0.5',
           height: '150px',
           width: '150px'
        });
     }
   );
});

我假设您已经预先设置了amount的值。

div不会改变，因为opacity, height和width在两个选项中设置相同。

很尴尬，但我的错误是对CSS的误解，而不是JS。

下面是更正后的正常运行的代码:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
var clicked = false;
$(document).ready(function(){
    $("button").click(function(){
        if (clicked == false){
            $("div").animate({
                marginLeft: '250px'
            });
            clicked = true;
        } else {
            $("div").animate({
                marginLeft: '0px'
            });
            clicked = false;
        }
    });
});
</script> 
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
相关文章：