为何代码中颜色值无法刷新？jQuery像素画板功能异常

我太懂这个坑了！你现在的问题出在**color变量只在脚本启动时获取了一次初始值**，之后用户切换颜色时这个变量根本没跟着更新，所以快速填充功能自然一直用的是最初的黑色。

为什么会这样？ #

你在脚本顶部写的let color = $('.color-picker').val();只会在页面加载完成、脚本第一次执行的时候运行一次，把当时颜色选择器的默认值（黑色）存到color里。之后不管用户怎么选颜色，这个变量都不会自动刷新——它又不知道用户操作了颜色选择器对吧？

两种简单的解决办法 #

方法1：每次需要颜色时直接获取最新值

最直接的方式就是放弃提前定义color变量，每次点击快速填充按钮时，当场去颜色选择器里拿当前的颜色值：

$(".quick-fill").click(function() {
  // 每次点击都实时获取颜色选择器的当前值
  const currentColor = $('.color-picker').val();
  pixelCanvas.children().find('td').css('background-color', currentColor);
});

这种方式不用额外维护事件监听，逻辑简单，适合你的场景。

方法2：监听颜色变化实时更新变量

如果你的项目里还有其他地方需要用到当前选中的颜色（比如单个像素绘制），可以给颜色选择器绑定一个change事件，每次用户选完颜色就更新color变量：

// 初始化颜色变量
let color = $('.color-picker').val();

// 监听颜色选择器的变化，实时更新color
$('.color-picker').on('change', function() {
  color = $(this).val();
});

// 快速填充函数，现在用的就是最新的color值了
$(".quick-fill").click(function() {
  pixelCanvas.children().find('td').css('background-color', color);
});

这种方式的好处是，所有需要用当前颜色的地方都可以直接用color变量，不用每次都去DOM里查询，效率更高一点。

小提示 #

如果你用的是HTML5的<input type="color">，除了change事件，还可以用input事件来实时响应颜色变化（比如用户拖动颜色滑块的时候），不过对于快速填充这个功能来说，change事件已经足够覆盖用户选择完成的场景啦。

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