jQuery实现选中新调色板色块时自动取消上一选中项效果

不用维护全局选中索引、也不用逐元素操作行内样式，靠CSS状态类+事件委托就能高效实现需求，逻辑简单且易维护。

核心改动点 #

• 新增CSS选中状态类，将样式和交互逻辑解耦，避免行内样式优先级混乱
• 移除动态生成元素上的内联onclick，改用父容器事件委托，仅需绑定1次事件即可支持所有动态色块的点击响应，性能更优
• 点击色块时先清空所有色块的选中类，再给当前点击项追加选中类，天然实现单选互斥效果，无需额外记录上一个选中项

具体修改步骤 #

1. 新增选中态样式
   在原有CSS代码中追加选中类样式，和hover样式保持一致的高亮效果：

   .tinyPallete.selected {
       border: 2px solid #f6bd56;
   }
   

2. 修复原有代码小bug
   原有颜色配置中最后一个Arctic White的色值缺失闭合引号，补上即可避免JS解析报错：

   let penguinColors = {
       "Blue": "003366",
       "Green": "009900",
       "Pink": "FF3399",
       "Black": "333333",
       "Orange": "FF6600",
       "Yellow": "FFCC00",
       "Dark Purple": "660099",
       "Brown": "996600",
       "Red": "ff6666",
       "Dark Green": "006600",
       "Light Blue": "0099CC",
       "Lime Green": "8AE302",
       "Gray": "93A0A4",
       "Aqua": "02A797",
       "Arctic White": "F0F0D8"
   };
   

3. 简化色块渲染逻辑
   去掉循环拼接内联事件的代码，把色值、颜色名存在DOM自定义属性上，方便后续读取：

   function loadPalletes() {
       for(let colorName in penguinColors) {
           let colorHex = penguinColors[colorName];
           $('#palletes').append(`<div class="tinyPallete" data-color="${colorHex}" data-name="${colorName}" style="background: #${colorHex}"></div>`);
       }
       // 初始化默认选中第一个色块
       const $firstPallete = $('#palletes .tinyPallete:first');
       $firstPallete.addClass('selected');
       $("#penguinColorName").text($firstPallete.data('name'));
       $("#penguinDoll").css('background-color', `#${$firstPallete.data('color')}`);
   }
   

4. 替换原有选中逻辑
   删掉全局的selectPallete函数，改用事件委托绑定点击逻辑，代码更简洁：

   // DOM加载完成后绑定事件
   $(function() {
       $('#palletes').on('click', '.tinyPallete', function() {
           // 清除所有色块的选中状态
           $('.tinyPallete').removeClass('selected');
           // 激活当前点击的色块
           $(this).addClass('selected');
           // 更新玩偶颜色和名称展示
           const colorName = $(this).data('name');
           const colorHex = $(this).data('color');
           $("#penguinColorName").text(colorName);
           $("#penguinDoll").css('background-color', `#${colorHex}`);
       })
   })
   

方案优势 #

• 无额外全局状态变量，不会出现选中状态和UI不同步的问题
• 事件委托机制不受动态渲染元素影响，后续新增色块无需额外绑定事件
• 选中样式完全由CSS控制，后续要调整选中效果（比如加阴影、缩放动画）仅需修改CSS，无需改动JS逻辑

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