如何替换 css 类内容?

Question

我有一个代码，其中有一个充满正方形的地方，里面有一个彩色正方形每秒移动一次，这个正方形有一个 CSS 类来表示它的颜色，所以它并没有真正移动，只是向<span>添加一个新类并在一秒钟后将其删除。

我有一个函数，我想更改正方形的颜色，它会像这样工作：changeColor({R:50,G:200,B:50,A:1})

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

• 由于我有一个添加和删除方形颜色类的函数，因此我无法更改 CSS 类名，它必须相同，否则应用程序将无法工作。

• 如果我使用.css("background", "rgba(" + R + "," + G + "," + B + "," + A + ")");它会永远添加当前<span>中的颜色。

• 我无法让.attr()工作，也许我做得不正确。

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

没有一个有效，也许我没有正确使用它。

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"内)

完整的代码太长了，无法发布，抱歉，把它当作很多<span>里面什么都没有，只有 css 属性。

所以目标是改变CSS类：

#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

您可以通过将内联元素写入标头，然后将样式动态附加到标头来实现此目的。然后，您可以在 span 上添加/删除类并单独更新元素中的样式，而无需向 span 写入任何内联样式。

这里有一个例子(这可以改进很多，我只是重用了我之前的例子并调整了它来演示我的意思)：

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 背景设置为绿色的内联样式块。然后，它将类添加到范围，两秒钟后删除类，然后两秒钟后将背景颜色更改为红色并再次添加类 - 所有这些都无需将任何内联样式写入范围本身。