Toggleclass 以动态颜色突出显示答案

【问题标题】：Toggleclass highlighted with dynamic colorsToggleclass 以动态颜色突出显示
【发布时间】：2019-10-29 12:21:41
【问题描述】：

我有一个 JS 函数，它允许我设置由切换类突出显示的表 TD。

我想使用不同的颜色来突出显示，颜色应通过单击 div 并选择其 BG 颜色来选择。

表格和带颜色的 div 都是 PHP 动态生成的。（颜色也是从数据库中选择出来的，所以 CSS 类不起作用）。

我尝试了以下方法 - 通过生成“Colorpicker DIVS”，我将十六进制代码作为 ID 给他们，这样我就可以在 JQUERY 中使用 ID 作为颜色......当我现在突出显示 TD 并单击其中一个 div 时，所有突出显示的 TD 变为单击的 DIV BG 颜色。

实际上我需要它——点击“Colorpick-div”，然后用选定的 DIVS 背景颜色为点击的 TD 染色。

希望你明白我的意思。 :-)

这是 Toggleclass JS：

$(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);
});

【问题讨论】：

因此，当您的一个颜色 div 被点击时，将十六进制代码存储到一个变量中。然后用该变量的颜色为表格单元格着色，当它们被鼠标悬停时......
请注意id 不能以数字开头。 id="000" 无效。另一种方法是data 属性。
实际上 HexCodes 以 # 开头 :-)
@mat_script id 在页面上应该是唯一的并且不包含特殊字符(#)
# 也无效。必须以字母开头;-)

标签： javascript jquery css

【解决方案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>

【讨论】：