使用 jquery 動態變更 css 檔案中的靜態顏色

Question

我有多個按鈕，我有一個名為 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是在另一個檔案中完成的，並且正確地只有一個活動類，但樣式不會改變。

我希望我能正確解釋我的問題。

Answer 1

我不確定您想要的確切結果，但我對您的程式碼做了一些更改，因此一次只有一個活動背景。我也簡化了。您將滑鼠懸停在 CSS 上，將滑鼠懸停在 JavaScript 上…為了簡單的事情，繼續將滑鼠懸停在 CSS 檔案上。使用 JavaScript 處理點擊事件。

$('.bg').click(function(){
  $('.bg').css({backgroundColor: ''});
  $(this).css({backgroundColor: $(this).data('color')});
})

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

.bg:hover{
  background: red;
}

#