Добавить класс в несколько div в зависимости от события клика

Question

Добавить класс в несколько div в зависимости от события клика

0

Это сценарий. Мой клиент хочет изменить цветную тему веб-сайта, который я разрабатываю для него. У меня есть 4 divs, которые при нажатии будут менять цвет границы еще на 4 div. Каждое событие click изменит divs на другой цвет, в зависимости от того, какой из них был нажат.

Я думал, что использование некоторого jQuery решит его, но я должен делать что-то неправильно! Вот то, что я пытаюсь запустить:

$('.btn1').on('click', function(){
    $('.box').removeClass('colour2, colour3, colour4');
    $('.box').addClass('colour1');
});

$('.btn2').on('click', function(){
    $('.box').removeClass('colour1, colour3, colour4');
    $('.box').addClass('colour2');
});

$('.btn3').on('click', function(){
    $('.box').removeClass('colour1, colour2, colour4');
    $('.box').addClass('colour3');
});

 $('.btn4').on('click', function(){
    $('.box').removeClass('colour1, colour2, colour4');
    $('.box').addClass('colour4');
});

Любая помощь будет оценена.

Sii 22 окт. 2013, в 19:17

Источник

1

Пожалуйста, опубликуйте также свой HTML и пример jsFiddle.net, если это возможно.
j08691 22 окт. 2013, в 17:15
1

Итак, с какой проблемой вы столкнулись?
Terry 22 окт. 2013, в 17:15
0

Как это ведет себя ??? В чем дело???
Rajesh Paul 22 окт. 2013, в 18:05

Показать ещё 1 комментарий

Теги:

jquery

html

css

2 ответа

Ещё вопросы

Пожалуйста, опубликуйте также свой HTML и пример jsFiddle.net, если это возможно.
Итак, с какой проблемой вы столкнулись?

Kierchon · Answer 1 · 2013-10-22T15-01-00.000Z

Возьмите запятые из класса remove

$('.btn1').on('click', function(){
    $('.box').removeClass('colour2 colour3 colour4');
    $('.box').addClass('colour1');
});

$('.btn2').on('click', function(){
    $('.box').removeClass('colour1 colour3 colour4');
    $('.box').addClass('colour2');
});

$('.btn3').on('click', function(){
    $('.box').removeClass('colour1 colour2 colour4');
    $('.box').addClass('colour3');
});

 $('.btn4').on('click', function(){
    $('.box').removeClass('colour1 colour2 colour4');
    $('.box').addClass('colour4');
});

Примечание. Вы можете просто вызвать .removeClass() чтобы избавиться от всех классов, но если у вас больше классов в поле, чем только три, они удалят их все. Подробнее читайте на http://api.jquery.com/removeClass/

leaf · Answer 2 · 2013-10-22T15-19-00.000Z

Прочтите документ: http://api.jquery.com/removeClass ;)

//$('.box').removeClass('colour2, colour3, colour4');
$('.box').removeClass('colour2 colour3 colour4');