Question

我目前正在使用生成的HTML代码。

我正在尝试选择所有元素，然后过滤那些具有相同背景颜色并更改它的人。我当前的代码，无效：

$('*').filter(function(){
   return $(this).css('background-color') === '#0689cb';
}).css('background-color', 'green');

它返回了很多元素，但它不会改变任何东西。

如果我像这样尝试.length：

$('*').filter(function(){
   return $(this).css('background-color') === '#0689cb';
}).length;

将返回0，这意味着它没有得到任何东西。

我的过滤功能有什么问题？

哦，我用$（'div'）尝试选择器，看看选择器是否有问题，但它没有改变任何东西。

感谢您的帮助。

Answer 1

background-color将返回rgb。您需要找到十六进制代码的RGB值，并在条件中使用它。

$('*').filter(function() {
   return $(this).css('background-color') === 'rgb(6, 137, 203)';
}).css('background-color', 'green');

如果您决定手动转换十六进制值，请参考此 post ：

Answer 2

您需要使用RGB值，并且需要在它们之间使用逗号和空格来编写值。

下面是一个函数（改编自here），它将有效的十六进制代码转换为正确的RGB字符串。

$('*').filter(function(){
  return $(this).css('background-color') === hexToRgb('#0689cb');
}).css('background-color', 'green');

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    
    // Correct string should be like: "rgb(6, 137, 203)" <-- note the spaces
    return "rgb(" + 
        parseInt(result[1], 16) + ", " + 
        parseInt(result[2], 16) + ", " +
        parseInt(result[3], 16) + ")";
}

.colorToFind {
  background-color:#0689cb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colorToFind">hello</div>
<div>hello</div>
<div class="colorToFind">hello</div>
<div>hello</div>

在基于背景颜色

2 个答案: