Question

我有一组div：

<div id="div_01">ASD</div>
<div id="div_02">ASD</div>
<div id="div_03">ASD</div>

我想为这些div创建一组.click函数：

我试过了：

    for (var i = 1; i < 4; i++) {
        var picName = "#BSViolenceDiv_0" + i.toString();
        //alert("\nI have for i: " + i + ": " + picName);
        $("#div_0" + i.toString()).click(function(){
             $("#div_0" + i.toString()).animate({opacity:1}, 1000);
         });    
    }

它不起作用，因为我最终成为了3。

我做错了什么？

Answer 1

如果您可以使用全局类（例如my_div），那将会更好：

<div id="div_01" class="my_div">ASD</div>
<div id="div_02" class="my_div">ASD</div>
<div id="div_03" class="my_div">ASD</div>

然后将click事件附加到此类，这样您就不需要遍历所有div：

$(".my_div").click(function(){
    $(this).animate({opacity:1}, 1000); // "$(this)" refer to the clicked div
})

希望这有帮助。

$(".my_div").click(function(){
  $(this).animate({opacity:1}, 1000);
})

.my_div{
  opacity: 0.3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_01" class="my_div">ASD</div>
<div id="div_02" class="my_div">ASD</div>
<div id="div_03" class="my_div">ASD</div>

Answer 2

变量 i 在执行click事件处理程序中的代码之前已达到其最终值，因此它将始终在click处理程序中使用该最终值，因此选择器{{ 1}}不会引用点击的元素。

但您并不需要 i 来引用所点击的元素。只需使用"#div_0" + i.toString()：

替换：

this

使用：

$("#div_0" + i.toString()).animate

这是你错误的本质。但正如其他人所说，你不需要为每个$(this).animate创建一个单独的处理程序。只需为所有人创建一个，例如为他们创建一个类，然后使用它来选择div元素。

Jquery Create＆＃34; array＆＃34; of .click功能

2 个答案: