Tukar warna statik secara dinamik dalam fail css menggunakan jquery

Question

Saya mempunyai berbilang butang dan saya mempunyai kelas yang dipanggil bg. Dalam fail CSS, saya menggayakan kelas bg, tetapi pada masa yang sama, saya mahu dapat menukar warnanya secara dinamik daripada fail JS. Latar belakang hanya satu warna, tetapi saya boleh membuat warna yang berbeza yang saya mahu, sebagai contoh, kod warna berasal dari API (merah untuk test1, kuning untuk test2, dll.). Saya mahu menggunakan apa sahaja kod yang muncul. Sebagai contoh, jika anda pergi ke halaman test2, latar belakang akan menjadi kuning. Saya boleh melakukannya dengan membuat kelas test1 dan test2 dalam fail css tetapi ia tidak berfungsi kerana mungkin terdapat ratusan halaman dan lebih logik untuk menggunakan kod warna dari API daripada kerumitan menambahkannya ke fail 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>

Saya mencuba sesuatu yang serupa tetapi nampaknya hover berfungsi dengan baik tetapi apabila diklik ia kekal tetap tetapi saya hanya mahu salah satu daripadanya kekal aktif. Juga, dalam fail asal saya, addClass dan removeClass dilakukan dalam fail lain dan dengan betul hanya terdapat satu kelas aktif, tetapi gaya tidak berubah.

Saya harap saya menerangkan masalah saya dengan betul.

Answer 1

Saya tidak pasti hasil sebenar yang anda inginkan, tetapi saya telah membuat beberapa perubahan pada kod anda supaya hanya terdapat satu latar belakang aktif pada satu masa. Saya pun permudahkan. Anda menuding pada CSS, anda menuding pada JavaScript... untuk sesuatu yang mudah, teruskan dan tuding pada fail CSS. Gunakan JavaScript untuk mengendalikan acara klik.

$('.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;
}

sssccc