JQuery код не работает в Internet Explorer 7

Question

У меня есть следующая страница http://valogiannis.com/freelancer/ecommerce-final/

В праве есть три изображения, и в левом большой. Когда пользователь нажимает любое из трех изображений справа, большое изображение должно измениться на соответствующее. Я установил большие изображения из css в качестве фоновых изображений, а маленький - через html.

Во всех браузерах, которые я тестировал на платформе Windows (firefox, opera, safari, chrome, ie8), отлично работает, но в Internet Explorer 7 он не работает. Это не изображение изображения к соответствующему, а также не добавляет границы в текущем маленьком изображении.

Моего Jquery код заключается в следующем:

$("#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: Я создал живой пример, чтобы иметь возможность редактировать все, что вы думаете, может решить проблему http://jsbin.com/ehota4/3

Answer 1

обновления для обновленного вопроса: Проблема заключается в повторном использовании идентификатора, smallImage здесь должен быть классом, а затем использовать $(".smallImage img") в качестве вашего селектора.

You can test an updated/working version here.

---

Предыдущий ответ: Попробуйте использовать встроенные методы для этого (так как class струны могут варьироваться в зависимости от расстояния, но по-прежнему совпадают), например:

$("#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"); } 
}); 

Или, если класс эти имена являются определенными, используйте их в своих интересах:

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