Javascript 使用jQuery为图像交换库中的图像分配正确的类

所以，我用这个可爱的图像交换伙伴：

您可以在我的网站上看到它的演示：

问题是，#主图像img

<div id="main_image" class="grid_7">
    <img class="wide" src="zImages/arrows-2.jpg" />
</div>

我将其替换为：

$('#main_image img').attr('src',$(this).attr('src').replace());

键是.replace（'thumb/'，''）vs.replace（）

我们使用CSS来缩小图像，这大大加快了悬停时的图像加载时间。i、 e.图像已经加载，因为我们对拇指和主图像使用相同的图像

我自己回答这个问题的尝试没有成功

$('#main_image img').attr('class',$('#details img').attr('class').replace(this));

所以，这就是我的目的。有人有办法解决这个问题吗

非常感谢你抽出时间

干杯，

---

Jon

您需要使用

$（this）

选择器，以便jquery知道您在哪个图像上悬停。另外，您可能应该使用

mouseenter

而不是

hover

，因为您只需要验证鼠标位置一次。最后，去掉函数中的

replace（）

，因为它什么都不做。通过使用attr并更改src或类，可以自动替换该值。下面是我为您的页面设置的草稿：

您需要使用

$（this）

选择器，以便jquery知道您悬停在哪个图像上。另外，您可能应该使用

mouseenter

而不是

hover

，因为您只需要验证鼠标位置一次。最后，去掉函数中的

replace（）

，因为它什么都不做。通过使用attr并更改src或类，可以自动替换该值。以下是我为您的页面设置的草稿：

使用

$（'main#u image img'）.attr（'class'，$（this.attr（'class'））应该足够了

请参阅：
使用
$（'main#u image img'）.attr（'class'，$（this.attr（'class'））应该足够了

请参阅：
非常棒的答案，感谢您花时间在上下文中向我展示代码，这样更容易理解。：）注意：似乎“console.log（$（this.attr（'class'））；”对于生产和调试来说都是不必要的。这是正确的吗？是的，您可以删除它
Console.Log
仅显示firebug中Console选项卡内的语句。您应该仔细研究一下，因为它使javascript中的调试变得更加容易。回答非常好，感谢您花时间在上下文中向我展示代码，这样更容易理解。：）注意：似乎“console.log（$（this.attr（'class'））；”对于生产和调试来说都是不必要的。这是正确的吗？是的，您可以删除它
Console.Log
仅显示firebug中Console选项卡内的语句。您应该研究它，因为它使javascript中的调试变得更加容易。
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));

$('#main_image img').attr('src',$(this).attr('src').replace());

$('#main_image img').attr('class',$('#details img').attr('class').replace(this));