jquery - 如何有效地更新 jquery 中多个选择器类的 css

Question

我想用相同的值更新很多对象类的 css。例如:

$("selector1").css("background-color", "#abc");
$("selector2").css("background-color", "#abc");
...
$("selector50").css("background-color", "#abc");

我正在使用一个包含数百个类的小部件框架，我需要使用少量 jquery 函数更新这些类的 css，有点像简化的 themeroller 可视化。目前我正在浏览我的 css 文件并将类添加到我的代码中的 javascript 数组，然后用户可以通过自动触发的 arrayOfSelectors.each() 更新 css。当他们更新 <input type="color"> 时起作用， 例如。

将所有小部件类组装到一个数组中是一项非常耗费人力的工作。有更聪明的方法吗？

Answer 1

您可以为所有元素使用一个公共(public)类。请注意，元素可以有多个类。然后你可以使用像，

$(".commonClass").css("background-color", "#abc");

或者你也可以像这样使用逗号分隔的选择器，

$("selector1,selector2,selector3").css("background-color", "#abc");

另一种选择是使用以选择器开头的属性。

$("[id^=selector]").css("background-color", "#abc");

这将选择所有 id 以“selector”开头的元素。