jQuery code doesn't work in internet explorer 7

I have the following page http://valogiannis.com/freelancer/ecommerce-final/

In the right there are three images and in the left a big one. When the user click any of the three images in the right then the big image must change to the appropriate. I set the big images from css as background images and the small via html.

In all browsers I tested in windows platform (firefox,opera,safari,chrome,ie8) works fine but in internet explorer 7 it doesn't work. It doesn't the image image to the appropriate and also doesn't add the border in the current small image.

My jQuery code is the following:

$("#smallImage img").click(function() { 
    $(".current").removeClass("current");
    $(this).addClass("current");

    var index = $(this).attr('class');
    if (index == "First current") {$("#bigImage").removeClass().addClass("bigImageFirst"); }
    else if (index == "Second current") {$("#bigImage").removeClass().addClass("bigImageSecond");  }
    else if (index == "Third current") {$("#bigImage").removeClass().addClass("bigImageThird"); }
});

开发者_如何学编程EDIT: I created a live example to be able to edit whatever you think can solve the problem http://jsbin.com/ehota4/3

---

Update for updated question: The issue is repeated ID usage, smallImage should be a class instead here, then use $(".smallImage img") as your selector.

You can test an updated/working version here.

---

Previous answer: Try using the built-in methods for this (since class strings may vary by spacing, but still match), like this:

$("#smallImage img").click(function() { 
    $(".current").removeClass("current");
    var $this = $(this).addClass("current");  
    if ($this.hasClass("First")) { $("#bigImage").removeClass().addClass("bigImageFirst"); }
    else if ($this.hasClass("Second")) { $("#bigImage").removeClass().addClass("bigImageSecond");  }
    else if ($this.hasClass("Third")) { $("#bigImage").removeClass().addClass("bigImageThird"); }
}); 

Or if the class names are that certain, use it to your advantage:

$("#smallImage img").click(function() {
    $(".current").removeClass("current");
    var c = $.trim(this.className);
    $(this).addClass("current");  
    $("#bigImage").removeClass().addClass("bigImage" + c); }
});