jQuery - 如何让结果覆盖，而不是重复

Question

我有一个几乎完全适合我需求的脚本，你选择一种颜色，它通过在正文中添加内联 CSS 来更改 DIV 中的颜色。

它目前的工作方式是你为托盘一选择一种颜色，它添加内联 CSS，你对托盘二做同样的事情，它为内联 CSS 添加了一个新的样式标签，我的问题是如果你再次更改托盘的颜色而不是替换原来的 CSS，它会添加另一个内联样式，依此类推，直到你有一堆样式标签。

我试过什么？没什么，因为我不知道从哪里开始，我正在学习jQuery，目前有能力修改现有脚本，只能到此为止。

这是jQuery代码(下面的小提琴(：

function injectStyles(rule) {
let body = document.querySelector('body');
let style = document.createElement('style');
style.textContent = rule;
body.appendChild(style);
}
jQuery(function($) {
$(".picker").spectrum({
color: "#ffd800",
preferredFormat: "hex",
showInput: true,
change: function(color) {
var tiny = tinycolor(color);
color.getAlpha();
color.setAlpha(0.8);
color.getAlpha();
injectStyles('.testClass  { background:' + tiny.toRgbString() + '; color: #fff; border: solid 4px ' + tiny.toHexString() + '}');
}
})
$(".picker2").spectrum({
color: "#ffd800",
preferredFormat: "hex",
showInput: true,
change: function(color) {
var tiny = tinycolor(color);
color.getAlpha();
color.setAlpha(0.8);
color.getAlpha();
injectStyles('.testClass2  { background:' + tiny.toRgbString() + '; color: #fff; border: solid 4px ' +               tiny.toHexString() + '}');
}
})
});

但是您将需要使用一些库，所以这里是小提琴

请注意，我已经简化了我的示例，我的真实项目的"injectStyles"部分如下所示：

injectStyles('#tab09-1.midBg .bottomBtn:hover, #tab09-1.midBg .homeLinkBtn a:hover, #tab09-2.midBg .bottomBtn:hover, #tab09-2.midBg .homeLinkBtn a:hover, #tab09-3.midBg .bottomBtn:hover, #tab09-3.midBg .homeLinkBtn a:hover, #tab09-4.midBg .bottomBtn:hover, #tab11-4 .eaTest, #tab12-4.midBg .LinkButtons:hover, #tab12-4.midBg .linkbuttons.active, #tab12-4.midBg .linkbuttons:hover, .LinkButtons:hover, .darkBg, .darkBg .LinkButtons:hover, .darkBg .linkbuttons.active, .darkBg .linkbuttons:hover, .linkbuttons.active, .linkbuttons:hover, .midBg .LinkButtons:hover, .midBg .linkbuttons.active, .midBg .linkbuttons:hover, a.expand, button.active, button[type=button]:hover, input[type=submit]:hover { background: ' + tiny.toHexString() + '; color: #fff; } #tab01-2.midBg .searchCon a, #tab07-1.midBg .eaPlan .planbtn a:hover, #tab07-2 .eaPlan, #tab07-3 .eaPlan .planHead, #tab07-4.darkBg .eaPlan .planbtn a, #tab07-4.midBg .eaPlan .planbtn a, #tab09-1 .circleColour, .colDark { background:' + tiny.toHexString() + '; } #tab01-1 .mobFull a, #tab01-1.midBg .mobFull a i, #tab01-2 .mobFull a, #tab01-2.midBg .mobFull a i, #tab01-3 .mobFull a, #tab01-3.midBg .mobFull a i, #tab01-4.midBg .mobFull a i, #tab02-3.greyBg .loginBtn, #tab02-3.whiteBg .loginBtn, #tab06-4.greyBg .eaResInner:hover i, #tab06-4.whiteBg .eaResInner:hover i, #tab07-1 .eaPlan h3, #tab08-1.midBg .newsBtn a, #tab08-1.midBg .newsTitle a, #tab10-1.darkBg h3, #tab10-1.midBg h3, #tab10-3.darkBg h3, #tab10-3.midBg h3, .Header, .SubHeader, .header, .midBg a:hover, .subheader, h1, h3 { color: ' + tiny.toHexString() + '; } #tab01-4 .mobFull a { border: solid 1px #005173; color:' + tiny.toHexString() + '; } #tab01-4.midBg .mobFull a:hover, #tab01 - 4.darkBg.mobFull a: hover { background: #fff; color:' + tiny.toHexString() + '; }.whiteBg #mainNav.ddsmoothmenu ul li a { color: ' + tiny.toHexString() + '; cursor: pointer; }.greyBg #mainNav.ddsmoothmenu ul li a { color:' + tiny.toHexString() + '; cursor: pointer; } #tab03 - 2.darkBg ul.bxslider2.bxLeft { background- color: #002637; } #tab03- 2.darkBg ul.bxslider2.bxLeft: after { border- top: 500px solid ' + tiny.toHexString() + ';} #tab11 - 3.slick - dots li.slick - active button, #tab11 - 4.slick - dots li.slick - active button { background:' + tiny.toHexString() + ' !important; } #tab07 - 4.eaPlan { border: solid 1px ' + tiny.toHexString() + '; } #tab08 - 3.newsBtn a: hover { border: solid 1px ' + tiny.toHexString() + '; color: ' + tiny.toHexString() + '; } #tab03 - 4 ul.bxslider4.bxBg, #tab03 - 4 ul.bxslider4.slidePanel1, #tab03 - 4 ul.bxslider4.slidePanel2, #tab05 - 4.eaServ.servInner, #tab05 - 4.eaServ.servInner: hover, #tab09 - 2.inner, #tab09 - 3.inner, #tab09 - 4.inner { background:' + tiny.toRgbString() + '; } #tab08 - 3.newsTitle, #tab08 - 4.newsTitle, #tab10 - 4.staffCon { background:' + tiny.toRgbString() + '; color: #fff } #tab08 - 4.newsBtn a { background- color:' + tiny.toRgbString() + '; color: #fff; } #tab09 - 4.homeImage: hover.inner { background:' + tiny.toRgbString() + '; }');

Answer 1

不要使用样式注入，将 id 添加到div 并更改其背景颜色：

$(document).ready(function() {
$(".picker").spectrum({
color: "#ffd800",
preferredFormat: "hex",
showInput: true,
change: function(color) {
var tiny = tinycolor(color);
color.getAlpha();
color.setAlpha(0.8);
color.getAlpha();              
$('#palette-one-result').css({
background: tiny.toRgbString()
});              
}
});
$(".picker2").spectrum({
color: "#ffd800",
preferredFormat: "hex",
showInput: true,
change: function(color) {
var tiny = tinycolor(color);
color.getAlpha();
color.setAlpha(0.8);
color.getAlpha();
$('#palette-two-result').css({
background: tiny.toRgbString()
});         
}
});
});

小提琴