如何一次更改多个 div 类？答案

【问题标题】：How to change multiple div classes at once?如何一次更改多个 div 类？
【发布时间】：2011-10-21 05:03:37
【问题描述】：

我有 2 里是可点击的。在鼠标单击时，我想更改页面上其他 10 个 div 的类（不是任何被单击的 div）。

这是我正在寻找的互动：

-单击第一个 li 将 10 个 div 的类设置为“class1”。（这些类已经默认设置好了）

-点击第二个li将同样的10个类更改为“class2”

-向后和第四次切换

这是怎么做到的？

【问题讨论】：

你在用jQuery之类的框架吗？
我希望能够点击“Relative”来应用“row1”类。单击“Absolute”以应用类“row1A”。
相对

绝对
这是我要更改的类的 div 的代码：

a>

标签： javascript html css css-selectors

【解决方案1】：

你应该给出一些代码示例。如果我是你，我会使用 jQuery。有点击、切换事件和许多选择器来选择这些 div。

例子：

$("li:first").click(function() {
    $("div").setClass("class1");
});
$("li:eq(1)").click(function() {
    $("div").setClass("class2");
});

【讨论】：

谢谢。有关代码，请参见上面的两个 cmets。我愿意使用 jQuery 或任何有效的方法。请分享我应该如何在我的页面中使用它的示例代码。

【解决方案2】：

这是fiddle

【讨论】：

你的例子正是我要找的。非常感谢分享。我尝试将它应用到我的页面，但对我不起作用。 “class1”和“class2”是否在 div 的层和层的深处有关系吗？请参阅上面的代码。

【解决方案3】：

Wojciech 提供的答案很好并且会起作用。但是，如果您想添加 100 个可点击项目怎么办？我更喜欢一种更可扩展和更通用的方法，以便更广泛地使用（更不用说尺寸更紧凑了）。

备选方案#1

您可以使用 jQuery index() 函数找出被点击项目的索引，然后以这种方式应用类...

$('li').click(function(){
    var index = $('li').index($(this))+1;
    $("div").setClass("class" + index);
});

备选方案#2

您可以为您的 <li> 项目添加自定义属性

<li classToApply="class1">First Clickable Item</li>
<li classToApply="class2">Second Clickable Item</li>

$('li').click(function(){
    $("div").setClass($(this).attr('classToApply'));
});

值得一提

我的示例和Wojciech 提供的示例都需要The jQuery Library

【讨论】：

感谢 Dutchie432，但是如何在 html 中设置代码？我向 li 应用什么代码才能使其正常工作？