Question

我有一个代码，其中到处都是正方形，里面有一个彩色的正方形，每秒移动一次，这个正方形有一个CSS类，因为它是彩色的，所以它并没有真正移动，只是在{{1 }}，并在一秒钟后将其删除。

我有一个函数想要更改正方形的颜色，如下所示： <span>

我一直在尝试使其工作，但是我有这个问题：

由于我具有添加和删除方形颜色类的功能，因此我无法更改CSS类名称，因此必须相同，否则应用程序将无法正常工作。
如果我使用changeColor({R:50,G:200,B:50,A:1})，它将永远在当前.css("background", "rgba(" + R + "," + G + "," + B + "," + A + ")");中添加颜色。
我无法设法使<span>正常工作，也许我做得不好。

我尝试使用.attr()，.css，.removeClass和.addClass

没有工作，也许我没有正确使用它。

.attr

（这是a.sq_current，因为“ span”位于“ a”内部）

完整代码发布时间太长，很抱歉，将其视为很多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 + ")"); }，里面没有任何东西，只有CSS属性。

所以目标是更改CSS类：

<span>

对于我在函数中输入的内容，例如：#container .sq_bullet a.sq_current > span { background: rgba(255,106,0,1); }

Answer 1

您可以通过将内联元素写入标头，然后向其动态添加样式来实现。然后，您可以在跨度上添加/删除类，并独立更新元素中的样式，而不必向跨度写入任何内联样式。

这是一个示例（可以做很多改进，我只是重用了前面的示例，并对其进行了调整以证明我的意思）：

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背景设置为绿色。然后，它将类添加到跨度中，两秒钟后将其删除，然后两秒钟后，它将背景色更改为红色，然后再次添加类-所有这些都无需在跨度本身上编写任何内联样式。

如何替换CSS类内容？

1 个答案: