更改具有相同颜色的元素的背景颜色答案

【问题标题】：Change background color on elements with the same color更改具有相同颜色的元素的背景颜色
【发布时间】：2011-11-23 17:55:06
【问题描述】：

我正在尝试在这里创建一个简单的主题系统。我有几个红色背景颜色的元素。我还有一个按钮，可以将元素背景颜色更改为绿色。

我正在尝试编码，但我不知道如何选择并将所有红色元素的背景颜色更改为绿色！

例如，我有 4 个 div。其中两个有一个红色标题，当我单击按钮时，这些标题背景颜色必须更改为绿色。这里没问题，但问题是 div 是动态生成的，所以我是否必须循环所有页面以找到红色的 bg 颜色？有人可以启发我吗？ =)

非常感谢！ =)

【问题讨论】：

【解决方案1】：

我认为最好的解决方案是为每个主题使用不同的样式表，并将当前主题值保留在 SESSION 或 COOKIE 中，或者将其作为 URL 参数传递。但这将是一个服务器端解决方案。在客户端，您可以为每个主题使用不同的类，并使用.toggleClass()在按钮推送事件上切换它们

$('.green').toggleClass('red green');

【讨论】：

【解决方案2】：

最简单的方法是为您使用的每种背景颜色设置一个特定的 CSS 类。例如：

.color-red{ background-color: #FF0000; }
.color-green{ background-color: #00FF00; }

完成后，您可以选择 CSS 类以及设置 CSS 类：

$('#button-togreen').click(function(){
  $('.color-red').removeClass('color-red').addClass('color-green');
}

这是一种迂回的方法，但是没有简单的方法来选择 CSS 属性（要做到这一点，您必须选择页面的所有元素，然后检查每个元素背景颜色属性会非常低效...）

【讨论】：

【解决方案3】：

我不知道标题是什么意思，但我认为这应该可以满足您的要求：

$('.myDivs').filter(function(index){
  return $(this).css('color') == 'red';
}).css('color', 'green');

【讨论】：