Question

I have a simple function that is working in all browsers except for IE7.

$('.thumb-images .thumb-square span').click(function(){
    var target = $(this).attr("id");
    $('.main-images div').removeClass('selected');
    $('.main-images div#'+target).addClass('selected');
});

The URL of the example is here: http://susyboyer.com/editorial-illustration/people/

To give you a run down on the functionality – the thumbnails correlate to the larger image on the right. The first larger image is given a class of selected. When a thumbnail is clicked the class selected is removed and then it is added to the corresponding larger image.

If someone could give me some feedback, it would be great.

Thanks.

Liam.

Answer 1

Well, from what I can tell, it looks like you probably have multiple elements on your page with the same id. I am assuming this because of the way you have your code structured; the more simple and straightforward way of structuring your code to do what you want would be this:

$('.thumb-images .thumb-square span').click(function(){
    $('.main-images div').removeClass('selected');
    $(this).addClass('selected');
});

Since you haven’t done it that way, I would guess it’s because you have a span with the same id as a div. Try giving them unique ids, and instead using some other attribute to match them up. That’s probably why IE7 is having fits.