jQuery-基于复选框标签背景色的css颜色

对于选中的每个复选框，我尝试运行下面的函数，根据背景色的暗度将

颜色更改为白色/黑色。但是，第三个复选框应该足够暗，可以将文本颜色更改为白色，但它没有执行

   function isDark(color) {
    var match = /rgb\((\d+).*?(\d+).*?(\d+)\)/.exec(color);
    return (
      (match[1] & 255) + (match[2] & 255) + (match[3] & 255) < 3 * 256 / 2
    );
  }

以下是一个参考代码笔，其功能自行运行：


$（文档）.ready（函数（）{
功能isDark（彩色）{
var match=/rgb\（\d+）.*（\d+）.*（\d+）\/.exec（颜色）；
返回（匹配[1]&255）+（匹配[2]&255）+（匹配[3]&255）<3*256/2；
}
$（“.item”）。每个（函数（）{
var item=$（this.find（“.input”）；
var color=$（此）
.find（“标签”）
.attr（“数据颜色”）；
项目.变更（功能（）{
变量标签=$（此）；
变量点=$（此）
.最近（“.项目”）
.find（“.dot”）；
var cancel=$（此）
.最近（“.项目”）
.find（“.cancel”）；
如果（$（this）.prop（“选中”））{
var=0；
dot.css({
“-webkit转换”：“缩放（“+val+”），
“-moz变换”：“缩放（+val+”），
“-ms转换”：“缩放（“+val+”），
“-o变换”：“缩放（“+val+”），
变换：“缩放（“+val+”），
宽度：“0px”
});
css（“背景色”，颜色）；
css（“display”、“flex”）；
label.css(
“颜色”，
isDark（label.css（“背景色”）？“白色”：“黑色”
);
}否则{
var=1；
css（“背景色”，“背景色”）；
dot.css({
“-webkit转换”：“缩放（“+val+”），
“-moz变换”：“缩放（+val+”），
“-ms转换”：“缩放（“+val+”），
“-o变换”：“缩放（“+val+”），
变换：“缩放（“+val+”），
宽度：“12px”
});
css（“显示”、“无”）；
label.css（“color”，”）；
}
});
});
});
标签{
显示器：flex；
对齐项目：居中；
左边距：6px；
字体大小：12px；
线高：16px；
字体大小：400；
填充：4px0；
字体系列：Roboto单字体、arial字体、无衬线字体；
字母间距：-0.2px；
用户选择：无；
光标：指针；
过渡：所有0.25秒缓解；
}
输入{
显示：无；
可见性：隐藏；
}
.盒子{
显示器：flex；
填充：3rem
}
.项目{
背景色：白色；
左侧填充：8px！重要；
右边填充：8px！重要；
边框：1px实心#dadce0；
边界半径：6px；
显示器：flex；
对齐项目：居中；
保证金：.3rem；
过渡性质：全部；
过渡时间：0.1s；
过渡定时功能：易进易出；
}
.取消{
填充：0px 6px；
显示：无；
过渡：所有0.25秒缓解；
}
多特先生{
边界半径：50%；
宽度：12px；
高度：12px；
过渡：所有0.25秒缓解；
}
.项目：第n个子项（1）.点{
背景：rgb（255,64,129）；
}
.项目：第n个子项（2）.点{
背景：rgb（49231182）；
}
.项目：第n个孩子（3）.点{
背景：蓝色；
}

龙虾
金枪鱼
x
松木
x
更新
添加了另一个演示。我写了一个小插件，可以为
.dot
和
.cancel
制作动画参见演示2


但是，第三个复选框应该足够暗，可以将文本颜色更改为白色，但它没有执行

如果
isDark（）
能够实际工作（实际上没有），那么第三个按钮仍然保持不变。原因是因为它的
数据颜色
属性的值为“blue”，而它本应为
rgb（0,0255）
isDark（）
将返回false，因为“blue”是无效参数。即使它是正确的
isDark（）
也将始终返回false，因为它有太多语法错误：

function isDark(color) {
  var match = /rgb\((\d+).*?(\d+).*?(\d+)\)/.exec(color);
  return (match[1] & 255) + (match[2] & 255) + (match[3] & 255) < 3 * 256 / 2;
}

标签{
显示器：flex；
对齐项目：居中；
字体：400 12px/16px Roboto Mono，monospace；
字母间距：-0.2px；
填充：4px0；
左边距：6px；
用户选择：无；
光标：指针；
过渡：所有0.25秒缓解；
}
输入{
显示：无；
}
.盒子{
显示器：flex；
填充：3rem；
列表样式：无；
}
.项目{
显示器：flex；
对齐项目：居中；
背景色：#fff；
最小宽度：100px；
边框：1px实心#dadce0；
边界半径：6px；
左侧填充：8px；
右边填充：8px；
保证金：0.3雷姆；
转换：0.1s易入易出；
}
.文本{
显示：内联块；
最小宽度：50px；
}
.取消{
显示：内联块；
颜色：#fff；
填充：0px 6px；
过渡：所有0.25秒缓解；
}
多特先生{
显示：内联块；
宽度：12px；
高度：12px；
边界半径：50%；
右边距：20px；
过渡：所有0.25秒缓解；
}
.dot.off{
变换：比例（0）；
}
多顿先生{
变换：比例（1）；
}
#i0+标签.点{
背景色：rgb（255,64,129）；
}
#i1+标签.点{
背景色：rgb（49231182）；
}
#i2+标签.点{
背景色：rgb（0,0,255）；
}



龙虾


金枪鱼


松木


返回（匹配[
0
]&255）+（匹配[
1
]&255）+（匹配[
2
]&255）<3*256/2我需要保留问题中的动画
function isDark(color) {
  var match = /rgb\((\d+).*?(\d+).*?(\d+)\)/.exec(color);
  return (match[1] & 255) + (match[2] & 255) + (match[3] & 255) < 3 * 256 / 2;
}