我有多个按钮，并且我有一个名为 bg 的类。在 CSS 文件中，我设置了该 bg 类的样式，但同时，我希望能够从 JS 文件动态更改其颜色。背景只有一种颜色，但我可以制作我想要的不同颜色，例如，颜色代码来自 API（红色代表 test1，黄色代表 test2 等）。我想使用出现的任何代码。比如去test2页面，那么背景是黄色的。我可以通过在 css 文件中创建类 test1 和 test2 来做到这一点，但它没有用，因为可能有数百个页面，使用 API 中的颜色代码比添加它们的麻烦更符合逻辑对 css 文件加一。

$('.bg').click(function(){
    $(this).unbind('mouseenter mouseleave');
  $('.bg').removeClass('active');
  $('.bg.active').css('background','yellow');
  $(this).addClass('active');
}).hover(
  function(){
    $(this).css({
      'border-color': '#4000a1',
      'background': 'blue'
    });
  },
  function(){
    $(this).css({
        'border-color': '#4000a1',
        'background': 'transparent'
      });
});

.bg{
  border: 2px solid #4000a1;
  background: gray;
  width: 200px;
  height: 150px;
  margin-bottom: 20px;
}

.bg.active{
  background: red;
}

.bg:hover{
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='bg'></div>
<div class='bg'></div>

我尝试了类似的操作，但似乎悬停工作正常，但单击时它保持固定，但我只希望其中一个保持活动状态。另外，在我的原始文件中，addClass和removeClass是在另一个文件中完成的，并且正确地只有一个活动类，但样式不会改变。

我希望我能正确解释我的问题。