嘿，我来帮你拆解下当前代码里的核心问题，以及对应的修复办法：

1. 选择器未区分菜单对应的图片容器 #

你现在的JS逻辑大概率是直接用.menu-viewer选择了所有带这个类的元素，而NEW和SHOP菜单各自的图片容器都用了这个类——这就导致不管悬停哪个菜单的选项，都会同时更新两个容器的图片，所以SHOP的图片会跟着NEW的操作同步变化。

举个典型的错误示例：

$('.new-menu-item').hover(function() {
  // 这里选了所有.menu-viewer，两个容器都会被修改
  $('.menu-viewer').attr('src', $(this).data('img'));
});

2. SHOP菜单的默认图片缺少初始化逻辑 #

页面加载完成后，你没有给SHOP对应的图片容器设置默认图片的步骤，所以它一开始就处于无图状态，没法展示默认内容。

具体修复步骤 #

第一步：给图片容器加专属标识 #

先给NEW和SHOP的.menu-viewer分别加上专属类，用来区分它们：

<!-- NEW菜单对应的图片容器 -->
<div class="menu-viewer menu-viewer--new"></div>
<!-- SHOP菜单对应的图片容器 -->
<div class="menu-viewer menu-viewer--shop"></div>

第二步：修改JS逻辑，定向更新容器 #

调整悬停事件的处理代码，让每个菜单的选项只修改自己对应的图片容器：

// NEW菜单的悬停逻辑
$('.new-menu-item').hover(
  // 鼠标进入时切换对应图片
  function() {
    $('.menu-viewer--new').attr('src', $(this).data('img'));
  },
  // 可选：鼠标离开时恢复NEW的默认图
  function() {
    $('.menu-viewer--new').attr('src', 'new-default-image.jpg');
  }
);

// SHOP菜单的悬停逻辑
$('.shop-menu-item').hover(
  function() {
    $('.menu-viewer--shop').attr('src', $(this).data('img'));
  },
  function() {
    $('.menu-viewer--shop').attr('src', 'shop-default-image.jpg');
  }
);

第三步：初始化默认图片 #

在页面加载完成时，给两个容器设置好默认图片：

$(document).ready(function() {
  // 初始化NEW菜单的默认图
  $('.menu-viewer--new').attr('src', 'new-default-image.jpg');
  // 初始化SHOP菜单的默认图
  $('.menu-viewer--shop').attr('src', 'shop-default-image.jpg');
});

这样修改后，悬停NEW菜单的选项只会更新NEW对应的图片容器，SHOP的图片不会被干扰，而且页面一加载，SHOP的默认图就会显示出来啦。

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