Ich habe mehrere Schaltflächen und eine Klasse namens bg. In der CSS-Datei formatiere ich die bg-Klasse, möchte aber gleichzeitig ihre Farbe aus der JS-Datei dynamisch ändern können. Der Hintergrund hat nur eine Farbe, aber ich kann nach Belieben andere Farben erstellen. Die Farbcodes stammen beispielsweise von der API (Rot für Test1, Gelb für Test2 usw.). Ich möchte jeden Code verwenden, der auftaucht. Wenn Sie beispielsweise zur Seite test2 gehen, ist der Hintergrund gelb. Ich könnte es tun, indem ich die Klassen test1 und test2 in der CSS-Datei erstelle, aber es funktioniert nicht, da es möglicherweise Hunderte von Seiten gibt und es logischer ist, die Farbcodes aus der API zu verwenden, als sie mühsam zur CSS-Datei hinzuzufügen .

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

Ich habe etwas Ähnliches versucht, aber es scheint, dass der Hover gut funktioniert, aber wenn er angeklickt wird, bleibt er fixiert, aber ich möchte nur, dass einer davon aktiv bleibt. Außerdem werden in meiner Originaldatei „addClass“ und „removeClass“ in einer anderen Datei ausgeführt, und richtigerweise gibt es nur eine aktive Klasse, aber der Stil ändert sich nicht.

Ich hoffe, ich habe mein Problem richtig erklärt.