Dynamic jQuery Selectors, variable problem

Question

I'm just trying to make a list of questions with hidden answers that shows upon click. My code hides all divs, but when I click on the anchors, only the last box is toggled. In this case, every anchor toggles the 5th box, and not their own.

for(var i=1; i<6; i++){
    var x = i+"";
    $("#box"+ x).hide();
    $("#feature"+x).click(function(){
        $("#box"+x).toggle(400);
    });
}

My basic HTML looks like this, but with 5 pairs:

<p><a id="feature1" href="#">1. Absent Message</a></p>
<div id="box1">Stuff here 1</div>
<p><a id="feature2" href="#">2. Alarm Setting</a></p>
<div id="box2">Stuff here 2</div>

If I wrote out the functions without using the for loop and string concatenation, the functions do what I want them to. Can someone point me in the right direction? Am I doing something wrong with the string manipulation?

Nick Craver · Accepted Answer · 2010-12-02 01:08:27Z

5

Your problem is that x is shared between all copies of the loop, so in the end it's always 5, and $("#box"+x) will always be $("#box5") when it's appending at click time. An easier way would be classes, like this:

<p><a class="feature" href="#">1. Absent Message</a></p>
<div class="box">Stuff here 1</div>

Then find it relatively, like this:

$(".box").hide();
$(".feature").click(function() {
  $(this).parent().next(".box").toggle(400);
});

If that's not an option, you need to provide the necessary scope to your loop, like this:

for(var i=1; i<6; i++){
  (function(x) {
    $("#box"+ x).hide();
    $("#feature"+x).click(function(){
      $("#box"+x).toggle(400);
    });
  })(i);
}

By doing this we're passing i into the anonymous function, which gets its own copy called x, not a shared variable scoped to whatever function your for loop is in (which is what's currently happening).

answered Dec 2, 2010 at 1:08

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul N Over a year ago

Nick, thanks for explaining the logic behind my variable/scope problem. Your solution worked flawlessly as well as providing a good example of how dynamic selectors should be used. Hope this helps other newbies.

Collectives™ on Stack Overflow

Dynamic jQuery Selectors, variable problem

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related