多图切换功能优化：点击禁用图时置灰其他图片的实现问题

你的核心问题在于原代码只处理了单个元素的显示切换，没有对所有图片组进行全局状态控制。可以通过以下方式修改：

1. 优化HTML结构（可选但更清晰） #

把每组彩色/禁用图片放到统一容器中，方便后续批量操作：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="color-group">
  <div class="toggle"><img src="data/img/controller/orange.jpg"></div>
  <div class="toggled"><img src="data/img/controller/orange_disabled.jpg"></div>
</div>
<div class="color-group">
  <div class="toggle"><img src="data/img/controller/red.jpg"></div>
  <div class="toggled"><img src="data/img/controller/red_disabled.jpg"></div>
</div>
<div class="color-group">
  <div class="toggle"><img src="data/img/controller/black.jpg"></div>
  <div class="toggled"><img src="data/img/controller/black_disabled.jpg"></div>
</div>
<div class="color-group">
  <div class="toggle"><img src="data/img/controller/green.jpg"></div>
  <div class="toggled"><img src="data/img/controller/green_disabled.jpg"></div>
</div>

2. 重写JavaScript逻辑 #

去掉原有的冗余计数器逻辑，改为全局控制所有图片状态：

// 初始化：默认所有禁用图显示，彩色图隐藏（根据需求可调整初始状态）
$('.toggle').hide();
$('.toggled').show();

// 点击禁用图时触发状态切换
$('.toggled').on('click', function() {
  // 第一步：全局置灰——所有彩色图隐藏，禁用图显示
  $('.toggle').hide();
  $('.toggled').show();
  
  // 第二步：激活当前点击的图片——隐藏当前禁用图，显示对应的彩色图
  $(this).hide();
  $(this).prev('.toggle').show();
});

逻辑说明 #

• 初始化阶段可根据需求调整默认状态，比如要默认显示某张彩色图，只需修改初始化代码：$('.color-group:first .toggle').show(); $('.color-group:first .toggled').hide();
• 点击禁用图时，先统一将所有图片切换为禁用状态，再单独激活当前点击的图片为彩色状态，完全匹配你的需求。

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