Question

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

以下是我正在寻找的互动：

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

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

- 切换回第四个

这是怎么做到的？

Answer 1

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

示例：

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

Answer 2

这是fiddle

Answer 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

如何一次更改多个div类？

3 个答案: