Question

我有一个JS函数，它允许我设置由toggleclass突出显示的表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);
});

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>

切换类以动态颜色突出显示

1 个答案: