如何替换 css class 内容？

Question

我有一个代码，其中有一个充满正方形的地方，里面有一个每秒移动的彩色正方形，这个正方形有一个 CSS class 因为它的颜色所以它并没有真正移动，只需将新的 class 添加到 <span> 并在一秒钟后将其删除。

我有一个函数，我想改变方块的颜色，它的工作方式如下： changeColor({R:50,G:200,B:50,A:1})

我一直在努力让它工作，但我遇到了这个问题：

因为我有添加和删除正方形颜色的功能 class 我不能更改 CSS class 名称，它必须相同否则应用程序将无法运行。
如果我使用 .css("background", "rgba(" + R + "," + G + "," + B + "," + A + ")"); 它会永远在当前 <span> 中添加颜色。
我无法让 .attr() 正常工作，可能是我操作不正确。

我试过使用 .css、.removeClass、.addClass 和 .attr

None 成功了，可能是我没有正确使用它。

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 + ")");

}

（它是 a.sq_current，因为 "span" 在 "a" 内）

完整代码太长post，抱歉，把它当成很多<span>，里面什么都没有，只有css个属性。

所以objective就是改CSS class:

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

我在函数中输入的任何内容，例如：changeColor({R:50,G:200,B:50,A:0.8})

Answer 1

您可以通过向 header 写入一个内联元素然后动态地将样式附加到它来实现这一点。然后，您可以 add/remove 跨度上的 class 并独立更新元素中的样式，而无需向跨度写入任何内联样式。

这是一个例子（这可以进一步完善，我只是重复使用了我之前的例子并对其进行了调整以证明我的意思）：

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>

请注意，此示例创建了一个内联样式块，其 .myClass 背景设置为绿色。然后它将 class 添加到跨度中，两秒后删除 class，然后两秒后将背景颜色更改为红色并再次添加 class - 所有这些都没有写任何内容将样式内联到 span 本身。

如何替换 css class 内容？

How can I replace a css class content?

javascript

css

jquery

background-color

rgba