Question

在一切之前,ty忙帮助和 s解 no。

I have problem with event inside a for. The DOM is something like that:

<div class="wrap">

  <div class="trigger">...</div>
  <div class="trigger">...</div>

  <div class="box">...</div>
  <div class="box">...</div>

</div>

我的J. Query是:

for( i = 0; i < $( .trigger ).length; i++ ){
$( .trigger:eq( +i+ ) ).click(function(){
    $( .box:eq( +i+ ) ).fadeIn();
});

$( .box:eq( +i+ ) .bt-close ).click(function(){
    $( .box:eq( +i+ ) ).fadeOut();
});
}

Well, the problem is, when i click on trigger, the value of i is 2. I don t want to use trigger1, trigger2... because i do not know how many will have in the final version.

Answer 1

function createEffects(index) {
    $( .trigger:eq(  + index +  ) ).click(function() {
        $( .box:eq(  + index +  ) ).fadeIn();
    });

    $( .box:eq(  + index +  ) ).click(function() {
        $( .box:eq(  + index +  ) ).fadeOut();
    });
}


for (i = 0; i < $( .trigger ).length; i++) {

    createEffects(i);
}

如果你能够的话,我将避免采取关闭措施。 http://jsfiddle.net/JBbQk/“rel=“nofollow”

Answer 2

问题正在结束。休息室内的功能将铭记从环绕的“<>i>”这一变量,而不是其价值。当职能被要求时,休息会已经退出,变值是最后的。相反,使这些职能本身具有价值。通常的做法是使用另一种变量。一种方式是“JoeTuskan”所示。另一种做法是使用自封的匿名功能:

for( i = 0; i < $( .trigger ).length; i++ ){
  (function(j) {
    $( .trigger:eq( +j+ ) ).click(function(){
      $( .box:eq( +j+ ) ).fadeIn();
    });

    $( .box:eq( +j+ ) .bt-close ).click(function(){
      $( .box:eq( +j+ ) ).fadeOut();
    });
  })(i);
}

这里的不同之处在于,外部匿名功能(即刻包装物)根本无法进入流通变量,因此无法捕获。而是用一个参数,其价值没有改变职能,然后由内部职能承担。

并不是说,你不敢在休息室内产生功能;但如果你这样做,你想要关闭,以掌握他们和休息场所之间的隔.。造成封锁的职能是外部界定的,如“JoeTuskan”的例子,还是内部的,就像在地雷中一样,这是否是一种风格;只要你理解,它为什么会起作用。实际上,他职位上所解释的方式应当比这一职位更快,因为这样,你就能够创造匿名职能,但我认为,了解这种方式的实际发生可能比较容易。

Answer 3

这种行为背后的原因是,关闭了<代码>功能({......}。简言之,当你造成关闭时,javascript传译员在功能申报时复制环境,从而使其功能得以利用,即使其范围不广(而且会收集垃圾而不关闭)。

您面临着这种可能的缺陷:封闭的does not接收物体的复印件,他们才可以查阅这些变量。举一个例子:

var i=0;
var closure = function() {alert(i);}
closure(); //alerts 0
i=1;
closure(); //alerts 1;

你们的例子也是如此。排行到最后,将<代码>i与<代码>$(......trigger ).length值。

因此,实现你想要的事物的适当途径是。 Joe Tuskan swer

Answer 4

采用另一种方式:

var triggers = $( .trigger );
var boxes = $( .box );
triggers.each(
    function( ind ){
        var box = boxes.eq(ind);
        $(this).on("click", 
            function(){
                box.fadeIn();
            }
        );
    }
);

boxes.find(".bt-close").on("click", 
    function(){
        $(this).closest( .box ).fadeOut(); //might be better to use parents(".box") - depends on HTML
    }
);

友情链接