JQuery - Как получить результат перезаписать, а не дублировать

Question

У меня есть скрипт, который почти идеально соответствует моим потребностям, вы выбираете цвет, он меняет цвет в DIV, добавляя встроенный CSS в тело.

То, как он работает в настоящее время, вы выбираете цвет дляпервый паллет, он добавляет встроенный 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() + '}');
        }
      })

    });

Но вам нужно будет использовать несколько библиотек, так что вот FIDDLE

Обратите внимание, что я упростил мой пример и раздел "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

Не используйте инъекцию стиля, добавьте идентификаторы в 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()
      });         
    }

  });
});

fiddle