Как правильнее дать большое количество CSS классов в обработку для jQuery?

241

30 мая 2017, 01:01

Допустип есть некая страница с большим набором элементов (Bootstrap). Например необходимо забиндить на определенный набор CSS классов, определенные события или добавить к DOM элементам какие то элементы (ну скажем кнопку удаления со страницы).

Набор классов может быть размером 100-200 и более штук. Он так же может меняться динамически, например добавился какой то класс, и надо чтобы скрипт и его обработал после обновления страницы.

Какой способ передачи этого самого набора классов выбрать в данном случае, так чтобы это работало быстро при инициализации скрипта?

Собственно вопрос возникает в связи с тем что хардкордить эти самые классы в скрипт явно нельзя, ибо получится каша да и динамики не будет никакой в таком случае.

По большому счету, задача сводится к тому, чтобы всем элементам на странице, у которых прописан тот или иной класс, появились доп элементы, например кнопка. При нажатии на кнопку, будет вызываться функция, в которую должны прийти параметрами, DOM объект на котором нажали кнопку. Количество и названия классов могут меняться. (например Bootstrap 2.x, Bootstrap 3.x или что то произвольное)

Answer 1

С трудом, но понял вашу проблему. Если уж так хочется поиграться, то из бд через AJAX выгружайте обычный массив со списком классов, потом записываете этот список классов с помощью цикла, в строку по такому алгоритму (в принципе, это можно сделать и на стороне бэкенда):

var per = '.class_1, .class_2 [, ...]';

Далее отрабатываете событие по переменной per. К примеру, у меня получился такой код, для события click():

$(function() { 
  var arr = ['cl1', 'cl4']; 
  var per = arr.map(elem => '.' + elem).join(','); 
 
  $(per).click(function() { 
    $(this).css({ 
      'border': '1px solid white' 
    }); 
  }); 
});

body { 
  background: black; 
} 
 
div, 
p, 
span, 
a { 
  display: block; 
  width: 20px; 
  height: 20px; 
  margin: 5px; 
  float: left; 
  border: 3px solid yellow; 
} 
 
div { 
  background: black; 
} 
 
p { 
  background: red; 
} 
 
span { 
  background: blue; 
} 
 
a { 
  background: green; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="cl1"></div> 
<p class="cl2"></p> 
<span class="cl3"></span> 
<a class="cl4"></a>

В примере я сделал 4 объекта. Событие повесил на классы cl1 и cl4. Вручную задал массив, чтобы сделать его перебор. Вы же этот массив будете получать из БД. В принципе, всё работает. Насколько это адекватно - я вам не подскажу, так как есть гуру, которые лучше меня разбираются. Работает? - Да, конечно (иначе бы я не писал)! :)