Question

我有这个代码，没有任何问题：

<script>
    $(document).ready(function () {
            $(".block1").click(function () {
                $("#fade1").fadeIn("slow").fadeOut("slow");
            });
    });

    $(document).ready(function () {
            $(".block2").click(function () {
                $("#fade2").fadeIn("slow").fadeOut("slow");
            });
    });
</script>

然而，由于我有六个街区，我正在尝试将其更改为循环：

$(document).ready(function () {
     for (i=1; i<7; i++) {
         alert(i);
         $(".block"+i).click(function () {
             $("#fade"+i).fadeIn("slow").fadeOut("slow");
             alert (i);
         });
     }
});

此for循环未按预期工作。正如预期的那样，它给所有6个块提供了警报，但是不是每个警报读取“block1”，“block2”，“block3”等，它们都说“block7”。

有谁知道为什么会这样？

Answer 1

您需要创建一个闭包来捕获i的当前值，以便在i递增时它不会影响以前的调用。像这样：

http://jsfiddle.net/UD5sf/

$(document).ready(function() {
    for (var i = 1; i < 7; i++) {
        alert(i);
        $(".block" + i).click(doIt(i));
    }

    function doIt(i){
        return function(){
            alert(i);
        }
    }
});

PS：如果我使用closure这个词错误，请随意对我大喊大叫。

Answer 2

如果您向div添加共享类，则可以在没有循环的情况下执行此操作。

更新

它不是100％清楚你想要做什么，但这是一种可以使用jquery data工作的方法。

<div class="animate-block" data-fadeid="fade1"></div>
<div class="animate-block" data-fadeid="fade2"></div>
<div class="animate-block" data-fadeid="fade3"></div>
<div class="animate-block" data-fadeid="fade4"></div>

<div id="fade1"></div>
<div id="fade2"></div>
<div id="fade3"></div>
<div id="fade4"></div>

<script>
$(document).ready(function () {
        $(".animate-block").click(function () {
            var fadeId = $(this).data("fadeid");
            $("#"+fadeId).fadeIn("slow").fadeOut("slow");
        });
});
</script>

如果你的块div和fade div彼此相邻，那么它变得更加简单，因为你可以使用next()方法。

<div class="animate-block"></div>
<div id="fade1"></div>
<div class="animate-block"></div>
<div id="fade2"></div>
<div class="animate-block"></div>
<div id="fade3"></div>
<div class="animate-block"></div>
<div id="fade4"></div>

<script>
$(document).ready(function () {
        $(".animate-block").click(function () {
            $(this).next().fadeIn("slow").fadeOut("slow");
        });
});
</script>

Answer 3

不是为每个元素分配不同的类名，而是附加一个数字来找到你要查找的那个，只需为所有元素分配相同的类名：

$(document).ready(function(){
    $(".block").click(function(){
        $(this).children(".fade").fadeIn("slow").fadeOut("slow"); 
        alert($(".block").index(this)); //gets the block index
    });
});

Answer 4

但是当我按下按钮时，总是让我保持警觉。

我不确定你的意思，但你的意思是第二个警报总是显示“7”吗？如果是这样，那是因为您的onclick函数已捕获变量i。您没有捕获i的副本，而是每个函数都捕获引用。因此，当您按下按钮时，它的值为7。

Answer 5

发生这种情况的原因是因为“i”是一个变量，它在您设置了所有.click函数后持续存在。这意味着在循环完成后，我的值为7.当您单击一个块并激活它的警报功能时，警报在该时刻使用i的值，该值始终为7，因为循环已经完成运行

Answer 6

您的问题是您的点击功能使用的是i（7）的全局值，而不是您附加该功能时的静态值。

您希望将当时的i值绑定到click函数。有几种方法可以做到这一点。最简单的是制作静态功能。尝试：

$(document).ready(function () {
  for (var i=1; i<7; i++) {
    alert(i);
    var click_func = new Function(
      "$('#fade" + i + "').fadeIn('slow').fadeOut('slow');
       alert(" + i + ");");

    $(“.block”+i).click(click_func);
  }
});

Answer 7

那是因为当你的事件运行时，循环已经完成，它们都使用i中的最后一个值，而不是你注册事件时的值。

它应该适用于选择器，

$(".block"+i).click(function ()

那应该是生成“block1”，“block2”等，并分配事件。

$("#fade"+i).fadeIn("slow").fadeOut("slow");
alert (i);

这些行虽然，它们都使用i，i作为一个clojure保持活着，我被分配1到7，当你的事件运行时，我= 7，所以每次点击“.block1”等，它只会淡出#fade7并发出警告（7）。

尝试如下：

$(document).ready(function () {
    for (i=1; i<7; i++) {
        alert(i);
        (function (i) {
            $(".block"+i).click(function () {
                $("#fade"+i).fadeIn("slow").fadeOut("slow");
                alert (i);
            });
        })();
    }
});

代码在循环模式下不起作用

7 个答案: