Код 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"); }
});

РЕДАКТИРОВАТЬ: Я создал живой пример, чтобы иметь возможность редактировать все, что вы думаете, может решить проблему http://jsbin.com/ehota4/3

Answer 1

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

Вы можете проверить обновленную / рабочую версию здесь .

---

Предыдущий ответ: Попробуйте использовать для этого встроенные методы (поскольку строки 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); }
});