Как написать JS скрипт, присваивающий классы после нескольких кликов?

Question

[Андрей]

Привет!
Есть html код, примерно такой:

<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

Нужно сделать, что бы при клике по элементу box присваивался дополнительный класс opened, а по третьему клику присваивался класс bonus, и после этого скрипт заканчивал работу, после 3-го клика классы больше не присваиваются. Так же, элементу с классом opened не может быть присвоен класс bonus, т.е. классы присваиваются элементу только один раз.
Помогите пожалуйста реализовать!

Comments

[Dima Polos]

Создаете переменную счетчик, при клике проверяете ее, если то - такой класс, если это - другой, если больше 3 - return

[Андрей]

Dima Polos, я в синтаксисе js не силён к сожалению...

[v3shin]

Андрей, ну так почитайте мануалы или спросите на фрилансе.

[Dima Polos]

Андрей, в том то и дело, что тут вопрос-ответ, а у вас вопрос - напишите за меня, так что даже не знаю, я суть кода описал, а дальше попробуйте собрать по крупицам, заодно научитесь :) я бы мог вам написать этот скрипт, это 1 минута работы, но завтра вам другой понадобиться, а послезавтра третий, так что лучше подучить на ходу

Answer 1

[Dima Polos]

Создаете переменную, - где-то в замыкании, так чтоб функция-обработчик ее видела, - счетчик, при клике проверяете ее, если то - такой класс, если это - другой, если больше 3 - return

Comments

[Fedor Vlasenko]

А зачем здесь внешние переменные
Можно спокойно записывать в атрибуты элемента.
В те-же data атрибуты

[Dima Polos]

Fedor Vlasenko, можно :) но тогда через девтулзы легче подменить значение)