javascript - Toggleclass 以动态颜色突出显示
问题描述
我有一个 JS 函数,它允许我设置由切换类突出显示的表 TD。
我想使用不同的颜色来突出显示,颜色应通过单击 div 并选择其 BG 颜色来选择。
表格和带颜色的 div 都是 PHP 动态生成的。(颜色也是从数据库中选择的,因此 CSS 类不起作用)。
我尝试了以下方法-通过生成“Colorpicker DIVS”,我将十六进制代码作为 ID 给他们,这样我就可以在 JQUERY 中使用 ID 作为颜色...。当我现在突出显示 TD 并单击其中一个 div 时,所有突出显示的 TD 变为点击的 DIVs BG 颜色。
实际上我需要它的另一种方式——单击“Colorpick-div”,然后用选定的 DIVS 背景颜色对单击的 TD 进行染色。
希望你明白我的意思。:-)
这是切换类 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);
});
解决方案
您可以使用类似的方法来更改所有突出显示的单元格的颜色,这可能不适用于所有版本的 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>
推荐阅读
- css - 如何正确使用 css 过渡?
- java - 如何从 Android 中的 Firebase 获取 List 的值?
- java - 为什么重新启动具有限制使用 UserManager.DISALLOW_USB_FILE_TRANSFER 的应用程序的设备会导致设备无法使用?
- android - Gradle Android rootProject.configurations 与配置
- scala - 如何使用 docker 在 spark 容器中运行 scala 代码?
- python-3.x - 如果索引不匹配,Pandas 不会从系列中放置值
- kubernetes - 如何使用 OpenStack 在 Kubernetes 中的同一端口上公开多个服务
- firebase - Firestore ConnectionState 在颤振应用程序中永远处于等待状态
- c# - c# WinForms - 如何获取容器表单设置的UserControl的大小
- javascript - 为 D3 堆积条形图准备嵌套 JSON 数据