how to use variable for html-element in jquery?

Question

The following code is part of a jQuery .js-file (which is used in the "supersized" image slider):

if (vars.current_slide == 0) {
 $("#captions").children().css("display", "none");
    $("#caption0").css("display","inherit").css("visibility","visible");
    } 
if (vars.current_slide == 1) {
 $("#captions").children().css("display", "none");
    $("#caption1").css("display","inherit").css("visibility","visible");
    } 
if (vars.current_slide == 2) {
 $("#captions").children().css("display", "none");
    $("#caption2").css("display","inherit").css("visibility","visible");
    }

As you can see, I tried to show a different caption (ranging from #caption0 to #caption3) for each current_slide.

How do I shorten this so that the caption for each current_slide is assigned via a variable, unlike my example?

Christofer Eliasson · Accepted Answer · 2012-03-12 14:27:01Z

4

The selector is just an ordinary string, so you can concatenate the variable like this:

$("#caption" + vars.current_slide)

So in your case, the code could be shortened to:

$("#captions").children().css("display", "none");
$("#caption" + vars.current_slide).css("display","inherit").css("visibility","visible");

Or even shorter:

$("#captions").children().hide();
$("#caption" + vars.current_slide).show();

answered Mar 12, 2012 at 14:27

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

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

1 Comment

BlueHorizon Over a year ago

Great stuff, this worked for me. Thank you for the fast answer :)! Also thanks to the others ;).

Matthias · Accepted Answer · 2012-03-12 14:26:55Z

2

Try:

$("#caption" + vars.current_slide)

An alternative would be putting the elements into an array and accessing it by index

answered Mar 12, 2012 at 14:26

Matthias

12.3k4 gold badges53 silver badges96 bronze badges

Comments

Blender · Accepted Answer · 2012-03-12 14:27:34Z

1

Just append the variable to the string:

$('#captions').children().hide();
  $('#caption' + vars.current_slide).css({
    'display': 'inherit',
    'visibility': 'visible'
   });
}

answered Mar 12, 2012 at 14:27

Blender

300k55 gold badges462 silver badges511 bronze badges

Collectives™ on Stack Overflow

how to use variable for html-element in jquery?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related