Как изменить несколько классов div одновременно?

Question

У меня есть 2 li, которые можно нажимать.При щелчке мышью я хотел бы изменить класс из 10 других div-ов на странице (ни один из div-ов, на которые нажимали).

Вот взаимодействие, которое я ищу:

- Нажатие первого li устанавливает класс из 10 делителей в "class1".(эти классы уже установлены по умолчанию)

- Нажатие на второй li изменяет те же 10 классов на «class2»

- Переключение назад и четвертое

Как это делается?

Answer 1

Вы должны привести пример кода. На вашем месте я бы использовал jQuery. Существуют щелчки, события переключения и множество селекторов для выбора этих элементов.

Пример:

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

Answer 2

Вот скрипка

Answer 3

ответ, предоставленный Wojciech, хорош и будет работать.Но что, если вы хотите добавить 100 кликабельных элементов?Я предпочитаю методологию, которая является более расширяемой и обобщенной для более широкого использования (не говоря уже о более компактном размере).

Альтернативный # 1

вы можете использовать jQuery *Функция 1008 * для определения индекса выбранного элемента и последующего применения класса таким образом ...

$('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, требуют Библиотека jQuery