Javascript 为什么'；我的代码中的t颜色值刷新？

使用jQuery，我创建了一个像素艺术生成器，用户可以在其中使用选定的颜色在网格上绘制。如果我使用

let color=$（'.color picker'）.val（）在脚本顶部的变量中定义所选颜色值，然后尝试在页面下方的函数中使用该变量，例如：

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

只有原色（黑色）才有效。换句话说，如果你尝试选择一种不同的颜色，它将不起作用。如果你想查看我的完整代码/看看它是如何工作的，下面是我的建议

我以前只是在函数中定义变量，但我遇到了另一个人，他能够全局定义变量，同时仍然允许颜色值更改（他的在这里）。为什么它不能在我的上工作？
第二个代码笔链接正在工作，因为它有代码：

$("#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">

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