多颜色选择器失效求助：像素画制作器的jQuery适配方案

嘿，我懂你遇到的问题了——明明加了多个同class的颜色选择器，外观都正常，可偏偏只有最左边那个能用来绘制网格，对吧？其实这是事件绑定的常见小坑，完全不用装额外插件，纯jQuery就能轻松搞定！

问题根源 #

大概率是你最初的代码只给第一个匹配到的颜色选择器绑定了事件，或者没有专门维护一个「当前选中颜色」的变量，绘制时直接取了某个固定选择器的值，自然只有第一个生效啦。

具体解决方案 #

我们可以通过「事件委托」+「跟踪当前选中颜色」的方式解决，不管是一开始就有的选择器，还是后面动态新增的，都能正常工作：

1. 维护当前选中颜色变量
   先初始化一个变量存储当前要使用的颜色，默认可以取第一个选择器的值：

   // 初始化当前选中颜色，默认用第一个选择器的颜色
   let currentColor = $('.color-picker').first().val();
   

2. 用事件委托绑定颜色选择器的事件
   把事件绑定到颜色选择器的父容器上，这样不管是现有还是后续新增的选择器，触发change事件时都能被捕捉到，更新当前颜色：

   // 假设颜色选择器的父容器class是color-pickers-container
   $('.color-pickers-container').on('change', '.color-picker', function() {
       // 更新当前选中颜色为当前点击的选择器的值
       currentColor = $(this).val();
   });
   

3. 绘制网格时使用当前选中颜色
   在网格单元格的绘制事件（比如点击、拖拽）里，用上这个currentColor变量来设置背景色：

   // 假设网格单元格的class是grid-cell
   $('.grid-cell').on('click', function() {
       $(this).css('background-color', currentColor);
   });
   

额外：动态新增颜色选择器的实现 #

如果还需要动态添加新的颜色选择器，只需要给添加按钮绑定点击事件，创建新的选择器元素并添加到容器里就行：

// 假设添加按钮的class是add-color-btn
$('.add-color-btn').on('click', function() {
   // 创建一个新的颜色选择器，默认红色可以自己改
   const newPicker = $('<input type="color" class="color-picker" value="#ff0000">');
   // 添加到容器中
   $('.color-pickers-container').append(newPicker);
});

这样操作后，所有的颜色选择器都能正常切换并应用到网格绘制上啦～

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