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/

Answer 2

在if / else语句之外移动初始var grown ='false'并从if / else语句中删除“var”关键字

Answer 3

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

仅在您声明变量的地方使用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;
  });

});

Answer 4

尝试在var grown

之外声明$("img").click(function()变量

Answer 5

您每次都重新声明您的变量。

var关键字用于在当前范围内声明变量。所以你在每个if语句中声明一个新变量，它掩盖了下面范围内的变量。

尝试删除var两个if语句中的{{1}}关键字，它应该有效。

Answer 6

grown变量是函数调用的本地变量。你必须将它带到外面的范围内，以便在它们之间保持其值。

BTW在条件块中使用var关键字是多余的，有点误导！

javascript if else语句

6 个答案: