How do I do this simple task in JQuery...show an image.

Question

I have many of these loading signs.

<span id="loading" rel="1n" style="display:none;">Loading...</span>
<span id="loading" rel="2a" style="display:none;">Loading...</span>
<span id="loading" rel="3w" style="display:none;">Loading...</span>

Notice the only difference is rel.

How do I write a JQuery script so that I choose which one to show?:

$("#loading").show() where rel = "2a"?

Answer 1

tries in this way:

$("#loading[rel='2a']").show();

Edit

Quite simply, no matter the language, is a simple concatenation of strings

var yourVariable = "2a";
$("#loading[rel='"+yourVariable+"']").show();

Answer 2

if you want to show all spans with a rel attribute that is "2a"

$('span[rel=2a]').show();

to show all spans that have a rel attribute that begins with "2a"

$('span[rel^=2a]').show();

More info on selectors

also, id's should be unique per element so I would recommend using classes to mark loading images instead of id.

so you would have

<span rel="1n" style="display:none;" class="loading-message">Loading...</span>
<span rel="2a" style="display:none;" class="loading-message">Loading...</span>
<span rel="3w" style="display:none;" class="loading-message">Loading...</span>

and your jquery would be:

$('.loading-message[rel^=2a]').show();

Update: to do a variable just do:

var x = "2a";
$('span[rel^='+x+']').show();

Answer 3

$('#loading[rel=1n]').show();

But, you really shouldn't have repeated ID's in your dom.