javascript if else 语句

Question

如果您点击我的网站上的图像，我会尝试将其放大。
如果您再次单击图片，我想撤消放大的 View 。

$("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上，所以它永远不会缩小。我的逻辑有问题吗？非常感谢任何帮助!

Answer 1

为什么你的代码不起作用:

在点击处理程序的开头，声明 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');
});

现场演示: http://jsfiddle.net/simevidas/waCQQ/1/