使用十六进制颜色码设置背景色失效问题求助

问题核心在于CSS类名不能包含#字符：你用$('.color-'+selectedColor)生成的选择器，当selectedColor是#7c4700时，会变成.color-#7c4700——浏览器会把#后面的部分识别为ID选择器，导致找不到目标元素，自然无法设置背景色。

给你两个可行的解决思路：

思路1：清理颜色值中的#再生成类名 #

给元素添加类名时，把十六进制颜色的#去掉，比如将#7c4700转成7c4700，类名设为color-7c4700。设置样式时同步处理：

// 处理选中的颜色值，去掉#
const cleanedColor = selectedColor.replace('#', '');
// 选中目标元素并设置背景色
$('.color-' + cleanedColor).css('background-color', selectedColor);

这样选择器就变成了合法的.color-7c4700，能正确匹配元素，同时background-color直接用原始十六进制值即可（jQuery完全支持十六进制颜色赋值）。

思路2：用自定义属性替代颜色值类名 #

放弃用颜色值作为类名的一部分，给目标元素添加data-color属性存储颜色标识：

<!-- 示例元素 -->
<div data-color="#7c4700" class="color-item"></div>

然后通过属性选择器选中元素：

$('[data-color="' + selectedColor + '"]').css('background-color', selectedColor);

这种方法更灵活，不管是颜色名称还是十六进制值都能直接使用，不用处理特殊字符，也避免了类名和颜色值耦合的问题。

补充说明：jQuery的.css()方法完全支持十六进制颜色值，只要选择器能正确找到元素，设置就会生效，之前的问题就是类名包含非法字符导致选择器失效。

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