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

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

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

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

---

非常感谢！=）

最简单的方法是为您使用的每种背景色指定一个特定的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属性（要做到这一点，你必须选择页面的所有元素，然后检查每个元素的背景色属性，这将是非常低效的…

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

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

---

我认为最好的解决方案是为每个主题使用不同的样式表，并将当前主题值保存在会话或COOKIE中，或者将其作为URL参数传递。但这将是一个服务器端解决方案。 在客户端，您可以为每个主题使用不同的类，并使用

---

您必须遍历每个元素，尽管它可以使用自定义jQuery选择器进行管理。我认为您最好使用

red

和

green

类。以及根据需要添加/删除这些类。也会使选择需要更改的元素变得更容易。对于红色元素，您将使用

$（'.red'）。toggleClass（'red-green'）

Nice-one-Mika！我写的解决方案与你的非常相似，但不管怎样它还是有效的！我会考虑按照您的建议将当前主题存储在Cookie或会话中！非常感谢！=]好的，现在我想到了，基于课堂的答案更好。

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