我来帮你搞定这个需求！你想要通过一个颜色选择器，修改所有带有指定类的<div>元素的字体颜色，只需要调整颜色选择器的change回调逻辑即可，不用为每个元素单独配置选择器。

核心思路 #

原代码里只针对单个ID为basic的元素修改颜色，我们只需要把目标选择器换成你指定的类名，然后批量更新所有匹配的元素样式就行。

修改后的完整代码 #

HTML部分

<div class="basic">这是第一个可修改颜色的div</div>
<div class="basic">这是第二个可修改颜色的div</div>
<div class="basic">这是第三个可修改颜色的div</div>
<div id="basic-log"></div>
<input type="text" class="basic-color-picker">

JavaScript部分

$(".basic-color-picker").spectrum({
  color: "#f00",
  change: function(color) {
    const hexColor = color.toHexString();
    $("#basic-log").text("change called: " + hexColor);
    // 批量修改所有带.basic类的div的字体颜色
    $(".basic").css("color", hexColor);
  }
});

关键代码解释 #

• $(".basic").css("color", hexColor)：这行代码会选中所有带有.basic类的元素，然后统一设置它们的字体颜色为颜色选择器选中的颜色。相比原代码里的document.getElementById("basic").style.color，这种方式可以批量操作多个元素，完美匹配你的需求。
• 如果后续需要给不同组的元素配置不同的颜色选择器，只需要把类名（比如.basic）换成对应的分组类名即可，扩展性很强。

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