javascript - 为什么我的代码中颜色值不刷新？

Question

我使用 jQuery 创建了一个像素艺术制作器，用户可以在其中使用选定的颜色在网格上绘图。如果我使用 let color = $('.color-picker').val(); 在脚本顶部的变量中定义选定的颜色值，然后尝试在页面下方的功能，例如:

$(".quick-fill").click(function() {
  pixelCanvas.children().find('td').css('background-color', color);
});

只有原始颜色(黑色)才有效。换句话说，如果您尝试选择不同的颜色，它将不起作用。这是我的 CodePen如果您想查看我的完整代码/了解它是如何工作的。

我之前通过简单地在我的函数中定义变量来解决这个问题，但我遇到了其他人，他能够全局定义变量，同时仍然允许颜色值更改(他的 CodePen 在这里)。为什么它对我的不起作用？

Answer 1

第二个 CodePen 链接有效，因为它有代码:

$("#color-picker").change(function() {
    color = $("#color-picker").val();
});

每次更改时都需要更新 var 颜色。否则 var color 将只存储第一个值。

因此，为您的输入颜色提供一个 ID，并在发生更改时更新 var color。

HTML:

<h4>pick a color</h4>
<input id='color-picker' type="color" class="color-picker">

JS:

let color = $("#color-picker").val();
$("#color-picker").change(function() {
    color = $("#color-picker").val();
});