如何用jQuery动态修改CSS静态颜色并管理多元素active状态

1. 修复点击后仅单元素保持active状态的问题 #

你的现有代码逻辑存在两处错误：移除所有.bg的active类后，再去选中.bg.active元素设置背景色，此时已无对应元素；直接unbind hover事件会导致后续无法恢复hover效果。修正后的逻辑如下：

// 抽离hover逻辑为独立函数，方便复用
function hoverIn() {
  $(this).css({
    'border-color': '#4000a1',
    'background': 'blue'
  });
}

function hoverOut() {
  $(this).css({
    'border-color': '#4000a1',
    'background': 'transparent'
  });
}

// 初始化所有.bg的hover事件
$('.bg').hover(hoverIn, hoverOut);

// 点击事件逻辑
$('.bg').click(function() {
  // 移除所有.bg的active类，同时恢复hover事件
  $('.bg').removeClass('active').off('mouseenter mouseleave').hover(hoverIn, hoverOut);
  // 给当前点击元素添加active类，并禁用其hover事件
  $(this).addClass('active').off('mouseenter mouseleave');
});

2. 通过API动态获取颜色并应用（避免大量CSS类） #

使用CSS自定义变量结合API数据实现动态配色，既不用创建数百个CSS类，也能解决样式优先级问题：

步骤1：修改CSS，用自定义变量替代固定颜色 #

.bg{
  --active-color: red;
  --hover-color: blue;
  --default-bg: gray;
  border: 2px solid #4000a1;
  background: var(--default-bg);
  width: 200px;
  height: 150px;
  margin-bottom: 20px;
  transition: all 0.2s;
}

.bg.active{
  /* 用!important确保优先级高于行内样式 */
  background: var(--active-color) !important;
}

/* 仅非active状态触发hover */
.bg:hover:not(.active){
  background: var(--hover-color);
}

步骤2：给按钮添加标识，匹配API颜色 #

<div class='bg' data-key="test1"></div>
<div class='bg' data-key="test2"></div>

步骤3：请求API并设置自定义变量 #

// 模拟API返回的颜色映射，实际项目替换为真实请求
const colorMap = {
  test1: '#ff0000',
  test2: '#ffff00'
};

function setDynamicColors(colorData) {
  $('.bg').each(function() {
    const key = $(this).data('key');
    if (colorData[key]) {
      // 给当前元素设置专属的active颜色变量
      $(this).css('--active-color', colorData[key]);
    }
  });
}

// 调用函数（实际放在API请求的回调中）
setDynamicColors(colorMap);

3. 解决原项目中addClass/removeClass样式不生效问题 #

核心原因是CSS优先级冲突：之前用.css()设置的行内样式优先级高于类选择器，导致.active类的样式被覆盖。解决方法：

• 优先采用上述自定义变量方案，完全避免行内样式设置；
• 若必须保留行内样式，给.bg.active的background属性添加!important强制覆盖；
• 确保执行addClass/removeClass的代码在DOM加载完成后运行，包裹在$(document).ready()中：

$(document).ready(function(){
  // 这里执行addClass/removeClass逻辑
});

内容的提问来源于stack exchange，提问作者anıl altan