javascript if else语句

Question

我试图让我的网站上的图像更大,如果你点击它们.
如果再次点击图片,我想撤消放大的视图.

$("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/