Question

before everything, ty for helping and sorry for the noob question.

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>

And my JS jQuery is:

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);
}​

I would avoid using closures when you can. Here’s an example without them: http://jsfiddle.net/JBbQk/