Changer dynamiquement les couleurs statiques dans le fichier CSS à l'aide de jquery

Question

J'ai plusieurs boutons et j'ai une classe appelée bg. Dans le fichier CSS, je stylise la classe bg, mais en même temps, je veux pouvoir changer dynamiquement sa couleur à partir du fichier JS. Le fond n'est qu'une seule couleur, mais je peux créer différentes couleurs que je veux, par exemple, les codes couleurs viennent de l'API (rouge pour test1, jaune pour test2, etc.). Je veux utiliser n'importe quel code qui apparaît. Par exemple, si vous accédez à la page test2, le fond sera jaune. Je pourrais le faire en créant les classes test1 et test2 dans le fichier css mais cela ne fonctionne pas car il peut y avoir des centaines de pages et il est plus logique d'utiliser les codes couleurs de l'API que de les ajouter au fichier 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>

J'ai essayé quelque chose de similaire mais il semble que le survol fonctionne bien mais lorsque vous cliquez dessus, il reste fixe mais je veux qu'un seul d'entre eux reste actif. De plus, dans mon fichier d'origine, addClass et removeClass sont effectués dans un autre fichier et correctement, il n'y a qu'une seule classe active, mais le style ne change pas.

J'espère avoir expliqué mon problème correctement.

Answer 1

Je ne suis pas sûr du résultat exact que vous souhaitez, mais j'ai apporté quelques modifications à votre code afin qu'il n'y ait qu'un seul arrière-plan actif à la fois. J'ai aussi simplifié. Vous survolez CSS, vous survolez JavaScript... pour quelque chose de simple, allez-y et survolez le fichier CSS. Utilisez JavaScript pour gérer les événements de clic.

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