Question

I am new to jQuery, exploring its syntax a bit.

My page has elements like this:

<area id="SA" ... />
<area id="AF" ... />
<area id="EU" ... />
<area id="NA" ... />

I am trying to show and hide div sections based on click events off the area tags, which have matching ending ID’s, coded like this:

<div id="div_SA" ... />
<div id="div_AF" ... />
<div id="div_EU" ... />
<div id="div_NA" ... />

So, to show the exact match, but hide all the div sections which have id’s that start with “div_” but don’t otherwise match, without hiding every other div on the page, I tried this:

    var q = 'div[id="div_' + event.target.id + '"]';
    var r = 'div[id^="div_"],div:not[id$=' + event.target.id + '"]';
    $(q).show();
    $(r).hide();

$(r).hide(); is not working. What am I doing wrong? (I know I could assign CSS classes and get at them with class names, but I’m still curious about how to construct a query that will work this way.)

Answer 1

Edit: See below for the syntax fix as mentioned in your post,

   var q = '#div_' + this.id;
   var r = 'div[id^="div_"]:not("#div_' + this.id + '")';

   $(r).hide();
   $(q).show();

DEMO

Please check the alternate solution below,

For evaluating q, I would simply use

var q = $('#div_' + this.id);

And for r,

var r = $('div[id^="div_"]').not(q);

r.hide();
q.show();

DEMO