How can I replace a css class content?

Question

I have a code where there's a place full of squares and inside that there's a a colored square moving every second, this square has a CSS class for it's color so it's not really moving, just adds a new class to a <span> and removes it after a second.

I have a function where I want to change the color of the square which would work like that: changeColor({R:50,G:200,B:50,A:1})

I've been trying to make it work but i have this problem:

• Since I have a function adding and removing the square color's class I can't change the CSS class name, it has to be the same or the application won't work.

• If I use .css("background", "rgba(" + R + "," + G + "," + B + "," + A + ")"); it adds the color in the current <span> forever.

• I can't manage to have .attr() working, maybe I'm not doing it correctly.

I've tried using .css, .removeClass, .addClass, and .attr

None worked, maybe I'm not using it correctly.

function changeColor(sqColor) {

    R = sqColor.R;
    G = sqColor.G;
    B = sqColor.B;
    A = sqColor.A;

    $($("#container .sq_bullet a.sq_current > span")[0]).css("background", "rgba(" + R + "," + G + "," + B + "," + A + ")");

}

(It's a.sq_current cause the "span" is inside an "a")

Full code is too long to post, sorry, take it as a really lot of <span> with nothing inside, just css attributes.

So the objective is to change the CSS class:

#container .sq_bullet a.sq_current > span {
    background: rgba(255,106,0,1);
}  

to whatever I put in the function, ex: changeColor({R:50,G:200,B:50,A:0.8})

Answer 1

You could achieve this by writing an inline element to the header and then dynamically appending the styles to it. You can then add/remove the class on the span and update the styles in the element independently without having to write any inline styles to the span.

Here is an example (this could be refined a lot, I just reused my previous example and tweaked it to demonstrate what I mean):

var element = $("#container .sq_bullet a.sq_current > span").eq(0);

function changeColor(sqColor) {
  R = sqColor.R;
  G = sqColor.G;
  B = sqColor.B;
  A = sqColor.A;
  
  if (!$('myStyles').length) {
    $('head').append('<style id="myStyles" type="text/css"></style>');
  }
  var newStyle = ".myClass { background: rgba(" + R + "," + G + "," + B + "," + A + ");}";
  $('#myStyles').html(newStyle);
}

element.addClass('myClass');
changeColor({R:50,G:200,B:50,A:0.8});

setTimeout(function() {
  element.removeClass('myClass');
}, 2000);

setTimeout(function() {
  element.addClass('myClass');
  changeColor({R:200,G:50,B:50,A:0.8});
}, 4000);

.myClass {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="sq_bullet">
    <a class="sq_current">
      <span>Span</span>
      <span>Span</span>
      <span>Span</span>
    </a>
  </div>
</div>

Note this example creates an inline style block with the .myClass background set to green. It then adds the class to the span, after two seconds it removes the class, then two seconds later it changes the background colour to red and adds the class again - all without writing any inline styles onto the span itself.