求助：JQuery实现鼠标悬停小图仅切换对应产品大图

我明白你遇到的困扰了——现在鼠标悬停任意小图时，所有产品的大图都会同步切换，核心问题出在你的jQuery代码没有限定操作范围，导致修改了页面上所有符合选择器的图片元素。咱们一步步来修正：

问题代码分析 #

你原来的代码里，这一行是导致全局修改的关键：

$('img').parent('.produkt_hidden').parent('.produkt').children('img').attr('src', billedenavn);

这个选择器会遍历页面上所有位于.produkt容器下的img元素（也就是所有产品的大图），所以每次悬停都会把所有产品的大图src一起替换掉。

修正后的代码 #

我们需要把操作范围严格限定在当前触发事件的小图所属的产品容器内，简化后的代码如下：

// 直接给所有小图绑定鼠标进入事件，无需额外的each循环
$('.do_something').mouseenter(function() {
    // 获取当前悬停小图的图片地址
    const billedenavn = $(this).attr("src");
    // 锁定当前小图所属的产品容器，仅修改该容器内的大图
    $(this).closest('.produkt').find('.stortbillede').attr('src', billedenavn);
});

代码逻辑拆解 #

• $(this)：指代当前被鼠标悬停的小图元素，确保我们只针对触发事件的那个小图操作。
• .closest('.produkt')：向上查找最近的.produkt父容器，把操作范围牢牢锁定在当前产品卡片内，不会波及其他产品。
• .find('.stortbillede')：在当前产品容器里精准定位对应的大图元素，只修改它的src属性。

额外优化建议 #

如果需要鼠标离开小图时恢复产品的原始大图，可以添加以下代码：

// 提前保存每个产品的原始大图地址
$('.produkt').each(function() {
    $(this).data('originalSrc', $(this).find('.stortbillede').attr('src'));
});

// 鼠标离开小图时恢复原始大图
$('.do_something').mouseleave(function() {
    const originalSrc = $(this).closest('.produkt').data('originalSrc');
    $(this).closest('.produkt').find('.stortbillede').attr('src', originalSrc);
});

页面效果说明：你的页面包含多个产品卡片（.produkt），每个卡片由标题、主图（.stortbillede）和隐藏区域（.produkt_hidden）内的小图组构成，修正后悬停某个产品的小图时，只会切换该产品的主图，其他产品完全不受影响。

内容的提问来源于stack exchange，提问作者Nicklas Degnebolig