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

更新更新的问题：问题是ID重复使用，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); }
});

jQuery代码在Internet Explorer 7中不起作用

1 个答案: