jQuery multiple variables in for loops

Question

This might be simple thing but just can't figure it out.

Let's assume I got fifty similar functions and there's two of them:

var unit = ['red', 'pink']
var unit2 = ['red2', 'red2']

$('#red').click(function() {
if($('#red2').is(':hidden')) {
$('#red2').toggle();
} else {
$('#red2').toggle();}}}

and

$('#pink').click(function() {
if($('#pink2').is(':hidden')) {
$('#pink2').toggle();
} else {
$('#pink').toggle();}}}

and I want to add all these functions in one/two for loops. I tried this:

for (var i = 0; i < unit.length; i++) {
for (var y = 0; y < unit2.length; y++) {
$('#i').click(function() {
if($('#y').is(':hidden')) {
$('#y').toggle();
} else {
$('#y').toggle();}}}}

I'm sorry, but why do you even need if when the code in its branches is identical? — raina77ow
– raina77ow, Commented Sep 29, 2013 at 21:28

Ram · Accepted Answer · 2013-09-29 21:36:19Z

2

.toggle() method detects the visibility of the element itself, there is no need to use if statement, you can use this keyword which refers to the clicked element:

$('#red, #pink').on('click', function() {
   // Based on the id property of the clicked element 
   // this selects #red2 or #pink2 element
   $('#' + this.id + '2').toggle();
});

Also note that $('#i') selects an element with ID of i, you should concatenate the strings:

$('#' + i).foo();

edited Sep 29, 2013 at 21:36

answered Sep 29, 2013 at 21:31

Ram

145k16 gold badges174 silver badges201 bronze badges

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

1 Comment

Ekso Over a year ago

Yes, the toggle() was there because I used earlier css('visibility','hidden') method. But this seems to fit my needs, thanks.

Alex · Accepted Answer · 2013-09-29 21:38:19Z

0

You should concatenate strings:

for (var i = 0; i < unit.length; i++) {
  $('#' + unit[i])
  .attr('data-dst', unit2[i])
  .click(function() {
    var dst = $(this).attr('data-dst');
    $('#' + dst).toogle();
  }
}

edited Sep 29, 2013 at 21:38

answered Sep 29, 2013 at 21:31

Alex

1,59311 silver badges14 bronze badges

2 Comments

Ry- Over a year ago

Loop variable problem!

Ry- Over a year ago

y === unit2.length by the time the click handler will run.

Collectives™ on Stack Overflow

jQuery multiple variables in for loops

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related