Question

I am trying to change images based on the first character inside an h2 tag that corresponds to the id of a collection of images within a div called jquery_image

If I have the following code then my images will change as expected

$(".jquery_image img:not([id=1)").hide();
$(".jquery_image img[id=2]").show();

However as soon as I try to change the images using the variable jTitle nothing happens

var jTitle = ($(this).text().substring(0,1));   
// alert(typeof jTitle); << string
$(".jquery_image img:not([id='+jTitle+'])").hide();
$(".jquery_image img[id='+jTitle+']").show();

Why does this code not work? What am I doing wrong.
Thanks

Answer 1

jTitle needs to be completely outside of your double quoted strings, otherwise all you’re doing is putting the literal string [id='+jTitle+'] in your selector:

$(".jquery_image img:not([id='" + jTitle + "'])").hide();

In any event, per @Raynos’s comment, you should be using a # selector to match on ID which makes the code much simpler to follow:

var sel = '#' + jTitle;
$(sel).show();
$('.jquery_image img').not(sel).hide();

By the way, I seem to recall reading that pure-numeric IDs aren’t supported by older browsers, although they are permitted in HTML5.