У меня есть некий блок с Голосованием (.vote). В нем есть две кнопки "За" и "Против" (button.voteaction). Так же у меня есть блок Кнопка (.btn). Кнопки "За"/"Против" должны быть блоками Кнопка (button.voteaction.btn) - т.е. микс получился. При клике на кнопки "За" или "Против" я хочу, что бы они выделялась цветом, например зеленым. Для этого у блока Кнопка есть модификатор green (.btn_theme_green) Т.е. при клике на voteaction с помощью JS я добавляю ей модификатор voteaction_active, но при это я должен добавить и класс btn_theme_green. Использовать в JS классы btn и btn_theme_green не хочется ибо кнопки могут быть заменены на другие (например, .btn34).
Скажите как правильно огранизовать взаимодействие этих двух блоков в JS?
Во-первых, не использовать для блоков названия типа
btn34
- никакой смысловой нагрузки это название не несет. Если у тебя 2 блока находятся на одной DOM-ноде, то можно воспользоваться хэлперомthis.findBlockOn('btn').setMod('theme', 'green')
. Но вот сосвсем не понятен кусок предложенияИспользовать классы btn и btn_theme_green не хочется
. Ну так если не хочется, то и пиши стили дляvote__action_active
.з.ы.: но я не уверен, что правильно понял твою мысль
btn34
- это просто пример.this.findBlockOn('btn').setMod('theme', 'green')
- да, это, наверное, решение. Жаль только, что при таком подходе, при изменении кнопки с.btn
на.btn34
нужно будет лезть в JS и менять код наthis.findBlockOn('btn34').setMod('theme', 'green')
я бы предложил вариант дизайна (и графического и технологического), когда меняется не сам цвет кнопки, а цвет подложки под ней (контейнера, в данном случае
vote__action
) — тогда можно очень легко слушать внутриvote__action
клики поbutton
и делатьthis.setMod
Сергей, спасибо. Попробую такой подход.