javascript if-else语句

如果你点击我的网站上的图片，我会把它们放大
如果再次单击图片，我想撤消放大视图

$("img").click(function(){

    var grown = 'false';

    if (grown == 'true') {
        $(this).animate({width: 300, height: 200}, 1000 );
        var grown = 'false';
        console.log(grown);
    }

    else if (grown == 'false') {
        $(this).animate({width: 600, height: 400}, 1000 );
        var grown = 'true';
        console.log(grown);
    }

});

放大是可行的，但是

grown

变量似乎总是停留在

true

上，因此它永远不会收缩。

---

我的逻辑有缺陷吗？非常感谢您的帮助

将初始变量grown='false'移到if/else语句外部，并从if/else语句内部删除“var”关键字

尝试将

var grown

变量声明在

$（“img”）外部。单击（function（）

每次都重新声明变量

var

关键字用于声明当前范围内的变量。因此，您在每个

if

语句中声明一个新变量，该语句屏蔽了下面范围内的变量

---

请尝试删除您的both

语句中的
var
关键字，如果
语句中的
if，则它应该可以工作。
函数调用的
grown
变量是本地变量。您必须将其带到外部的封闭范围中，以便在调用之间保留其值

顺便说一句，在条件块中使用
var
关键字是多余的，而且有点误导！
为什么代码不工作：

在单击处理程序的开头，声明
grown
变量并将其值赋给
'false'
。因此，将执行if语句的else分支。这将在用户每次单击图像时发生。if分支将永远不会执行


这就是诀窍：

$('img').click(function() {
    var props = $(this).hasClass('large') ?
                {width: 300, height: 200} : 
                {width: 600, height: 400};    

    $(this).animate(props, 1000).toggleClass('large');
});

实时演示：
您需要使用一个范围大于事件处理程序的变量，以便它保留其值，但您也需要为每个图像使用一个单独的变量。使用
每个
循环图像，以便您可以声明一个变量，为每个图像获取单独的范围

仅在声明变量的地方使用
var
，如果在更改变量的地方使用，则将声明另一个局部变量，并且仅更改该局部变量

Javascript有一个布尔类型，因此您应该使用值
true
和
false
，而不是字符串
“true”
和
“false”
，这样代码会更好

$("img").each(function(){

  var grown = false;

  $(this).click(function() {
    if (grown) {
      $(this).animate({width: 300, height: 200}, 1000 );
    } else {
      $(this).animate({width: 600, height: 400}, 1000 );
    }
    grown = !grown;
  });

});

是的，我很快就发现了这一点。这是行不通的。
grown
变量在每次单击时都是
'false'
。为什么要使用
'true'
而不是
true
等等？似乎很少有人忽略了您请求的要点。将'var grown=false'声明移到click函数之外对您来说是行不通的或者页面上的所有图像-调整一个图像的大小会将“grown”设置为true，然后单击另一个未调整大小的图像会看到“grown”为true，并且什么也不做。有关多个图像的解决方案，请参见下面的Šime Vidas的回答。+1提供基本解决方案，而不仅仅是一个答案。@josh，但走近时他会吓到我…：）那不是真的。JavaScript中没有块作用域。所有变量声明都会提升到函数的顶部。如果多次声明同一个变量，仍然只有一个变量。不过，仍然存在函数范围的问题。这只适用于一个映像。如果页面上有多个图像，则每个图像都需要一个变量。