delch
@delch
Frontend developer

Как правильно связывать DOM элементы и JS логику?

Как вы вообще связываете простые куски js кода вроде изменения состояния по клику и тд ?

Я всегда завязывался на css классах:
$(".my-selector").on("click", function(evt){
  evt.preventDefault();
  $(this).toggleClass("-active")
});

Но если одно и тоже действие нужно проделать с несколькими селекторами с разными классами ?
  1. Добавлять общий класс для всех этих элементов
  2. Обрабатывать события на нескольких элементах в js

А если пойти путем MV** фреймворков и использовать для этого data аттрибуты ?
<div class="my-selector" data-js="toggleView">Toggle view</div>

$("[data-js='toggleView']").on("click", function(evt){
  evt.preventDefault();
  $(this).toggleClass("-active")
});

На первый взгляд идея хороша тем, что мы абстрагируем JS логику в HTML / CSS друг от друга, однако в результате мы всё равно манипулируем внешним видом через CSS класс "-active". Что тогда делать ? Манипулировать состоянием через data атрибут? data-js-state='active' ? Но тогда и css придется переписывать под data атрибут:
[data-js-state="active"] {
  display: block;
}

Где же он, правильный вариант ?
  • Вопрос задан
  • 549 просмотров
Пригласить эксперта
Ответы на вопрос 1
@AndreyMyagkov
Не усложняйте задачу.
Смотрите как это сделано в БЭМ:

Toggle view

т.е. всё, что обрабатывается JS имеет дополнительный класс с префикcом js-

$(this).toggleClass("active") - тут все верно, одним выстрелом меняем и оформление элемента и легко добавляем/удялем/проверяем класс active
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы