for() loops with mutable variables

Question

HTML:

<a id="link1" href="#">LINK1</a>
<div id="text1" style="display: none;">text1 div</div>

<a id="link2" href="#">LINK2</a>
<div id="text2" style="display: none;">text2 div</div>

<a id="link3" href="#">LINK3</a>
<div id="text3" style="display: none;">text3 div</div>

JS:

for (var i = 0; i <= 500; i++) {
  $('#link' + i).click(function() {
    $('#text' + i).toggle('fast');
    return false;
  });
}

but it's not working. Idea is to make each #link(number) showing appropriate #text(number) block. But at this momenty my phpstorm says "i" is mutable variable.... Thanks in advance

It looks like the javascript is being interpreted by php ? Can you post more source code ? — SteveP, Mar 18 '13 at 17:03
I'd use a `class` instead: `$('a.some-class').click(function () {$(this).next('div.some-class').toggle('fast')})` — powerbuoy, Mar 18 '13 at 17:04

score 4 · Answer 1 · edited May 23 '17 at 12:28

4

You have a closure issue here, to avoid it just pass i as data to the event handler.

for (var i = 0; i <= 500; i++) {
  $('#link' + i).click(i, function(e) {
    $('#text' + e.data).toggle('fast');
    return false;
  });
}

edited May 23 '17 at 12:28

Community

1
1

answered Mar 18 '13 at 17:05

Musa

96,336
17
118
137

Error: TypeError: H.apply is not a function – Alexander Kim Mar 18 '13 at 17:39
Maybe its drupal conflict with it. any idea? – Alexander Kim Mar 18 '13 at 20:59

Vinny Fonseca · Accepted Answer · 2013-03-18T21:10:05.510

1

I think you could do the following:

Add a class "targetLink" to every :

<a id="link1" class="targetLink" href="#">LINK1</a>

Replace the for loop targeting the class itself:

$("a.targetLink").toggle(function() {
    $(this).next("div").slideDown(350);
}, function() {
    $(this).next("div").slideUp(350);
});

Fiddle: http://jsfiddle.net/VinnyFonseca/yxpCA/

EDIT: Extra functionality for closing previously opened div when clicking on another item.

$("a.targetLink").toggle(function() {
    $(".open").slideUp(350);
    $(this).next("div").slideDown(350).addClass("open");
}, function() {
    $(this).next("div").slideUp(350).removeClass("open");
});

edited Mar 18 '13 at 21:10

answered Mar 18 '13 at 17:09

Vinny Fonseca

450
3
10

This worked fine for me :) thanks. But it's not possible using for()? – Alexander Kim Mar 18 '13 at 17:43
It is possible. I just thought it would be a better solution on your case. – Vinny Fonseca Mar 18 '13 at 17:53
how also close previous opened div when u click on another? – Alexander Kim Mar 18 '13 at 21:00
I've edited the question to include that answer. Next time try opening another question. – Vinny Fonseca Mar 18 '13 at 21:10

score 0 · Answer 3 · answered Mar 18 '13 at 17:11

First edit the href attribute attribute to make reference to the corresponding Dom element and some class to identify the anchors.

<a id="link1" href="#text1" class="some-class">LINK1</a>
<div id="text1" style="display: none;">text1 div</div>

<a id="link2" href="#tex2" class="some-class">LINK2</a>
<div id="text2" style="display: none;">text2 div</div>

<a id="link3" href="#tex2" class="some-class">LINK3</a>
<div id="text3" style="display: none;">text3 div</div>

Then modify the javascript

$('.some-class').click(function() {
    $( $(this).attr('href') ).toggle('fast');
});

for() loops with mutable variables

3 Answers3

Linked