Toggleclass выделен динамическими цветами

Question

У меня есть функция JS, которая позволяет мне устанавливать таблицы TD, выделенные переключателем.

Я хотел бы использовать разные цвета для выделения, и цвета должны быть выбраны, нажав div и выбрав его BG Color. ,

Таблица и элементы Div с цветами все динамически генерируются PHP. (Цвета также выбираются из базы данных, поэтому классы CSS не будут работать).

Я попробовал следующее - Сгенерировав «Colorpicker DIVS», я даю им шестнадцатеричный код в качестве идентификатора, чтобы я мог использовать идентификатор в качестве цвета вJQUERY .... Когда я сейчас выделяю TD и нажимаю на один из элементов div, все выделенные TD становятся выбранным цветом DIVs BG.

На самом деле мне это нужно с другой стороны - нажмите «Colorpick-div», а затем покрасьте выбранные TD в выбранный цвет фона DIVS.

Надеюсь, вы понимаете, о чем я. : -)

Это Jog Toggleclass:

$(function () {

  var isMouseDown = false,
      isHighlighted;

  $(document).on('mousedown', '#fullTable td', function() {
      isMouseDown = true;
      $(this).toggleClass("highlighted");
      isHighlighted = $(this).hasClass("highlighted");
      return false; // prevent text selection
    })

    .on('mouseover', '#fullTable td', function () {
      if (isMouseDown) {
        $(this).toggleClass("highlighted", isHighlighted);
      }
    })

    .bind("selectstart", function () {
      return false;
    })

  $(document)
    .mouseup(function () {
      isMouseDown = false;
    });

});

И вот здесь я попробовал с JQUERY:

$(document).on("click", "div.actions", function (event) {
    var bgcolor = this.id;
    $("td.highlighted").css("background-color", bgcolor);
});

Answer 1

Вы можете использовать что-то вроде этого, чтобы изменить цвет для всех выделенных ячеек, это может не работать на всех версиях JQuery!

setTimeout(function(){
  $(':root').css('--bgColor', 'green');
}, 2000);

:root {  
  --bgColor: crimson;
}
div{
  display: block;
  width: 100px;
  height: 100px;
  background-color: black;
  margin: 10px;
}

.highlighted {
  background-color: var(--bgColor);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="highlighted"></div>
<div></div>
<div class="highlighted"></div>