複数のボタンがあり、bg というクラスがあります。 CSS ファイルで bg クラスのスタイルを設定しますが、同時に JS ファイルからその色を動的に変更できるようにしたいと考えています。背景は 1 色だけですが、必要に応じてさまざまな色を作成できます。たとえば、カラー コードは API から取得されます (test1 は赤、test2 は黄色など)。思いついたコードは何でも使いたい。たとえば、test2 ページに移動すると、背景が黄色になります。 CSS ファイルにクラス test1 と test2 を作成することでそれを行うこともできますが、数百ページになる可能性があるため機能しません。CSS にカラーコードを追加する手間よりも API からカラーコードを使用する方が論理的です。ファイル 。

$('.bg').click(function(){
    $(this).unbind('mouseenter、mouseleave');
  $('.bg').removeClass('active');
  $('.bg.active').css('background',' yellow');
  $(this).addClass('active');
}).hover(
  関数（）{
    $(this).css({
      'ボーダーカラー': '#4000a1',
      '背景': '青'
    });
  }、
  関数（）{
    $(this).css({
        'ボーダーカラー': '#4000a1',
        '背景': '透明'
      });
});

.bg{
  ボーダー: 2px ソリッド #4000a1;
  背景: グレー;
  幅: 200ピクセル;
  高さ: 150ピクセル;
  マージン-ボトム: 20px;
}

.bg.アクティブ{
  背景: 赤;
}

.bg:ホバー{
  背景: 赤;
}

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

同様のことを試しましたが、ホバーは正常に機能するようですが、クリックすると固定されたままになりますが、そのうちの1つだけをアクティブにしておく必要があります。また、元のファイルではaddClassとremoveClassが別のファイルで行われており、正しくはアクティブなクラスが1つだけですが、スタイルは変わりません。

私の問題を正しく説明できたと思います。