jqueryを使用してCSSファイルの静的色を動的に変更する

Question

複数のボタンがあり、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つだけですが、スタイルは変わりません。

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

Answer 1

あなたが望んでいる正確な結果はわかりませんが、一度にアクティブな背景が 1 つだけになるようにコードにいくつかの変更を加えました。私も簡略化しました。 CSS の上にマウスを移動し、JavaScript の上にマウスを移動します...簡単な場合は、CSS ファイルの上にマウスを移動してください。 JavaScript を使用してクリック イベントを処理します。

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

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

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