Установка переменной на основе класса CSS в jQuery

Question

Все еще пытаясь выяснить идиоматический jQuery - вот некоторый jQuery для установки переменной base для класса div - существует ли способ jQuery сделать это более компактно, учитывая, что рассматриваемый div может иметь более одного класса. ..

var currentType = 'component';
// text_component, image_component, tagged_component
if ($(my_div).hasClass('.text_component'))   { currentType = 'text_component' };
if ($(my_div).hasClass('.image_component'))  { currentType = 'image_component' };
if ($(my_div).hasClass('.tagged_component')) { currentType = 'tagged_component' };  

var dialog_box = $('div[id^='+currentType+'_dialog]');

Answer 1

currentType = $(my_div).attr("class");

Это назначит все, что находится в атрибуте класса, таким образом, также обрабатывая более одного класса

Если позже вам захочется выполнить индивидуальную проверку, вы можете просто разделить классы на массив отдельных значений классов ... например:

var classes = currentType.split(' '); //return an array of separate class values

Answer 2

Если я правильно понял, я бы посоветовал вам использовать плагин метаданных , написанный Джоном Резигом (создателем jquery), вы можете установить любые данные в любом элементе div для дальнейшего использования. И вам не нужно будет получать аргументы из класса CSS. Вы можете прочитать эти данные, когда захотите.

пример разметки: (со страницы плагина)

<div class="someclass {some: 'data'} anotherclass">...</div>

затем в javascript:

var data = $('div.someclass').metadata();
if ( data.some == 'data' ) alert('It Worked!');

надеюсь, это поможет, Синан.

Answer 3

При тестировании с использованием hasClass не включайте . (точка).

Что касается более простого способа, вы можете сократить его, но использование hasClass, вероятно, лучший способ.

Я предполагаю, что классы имеют приоритет (поэтому последние в серии if имеют приоритет над другими, если существует более одного класса)? Или вы хотите поддерживать несколько «компонентов»?

Вот более эффективная версия, которая лучше показывает, что происходит:

var currentType, div = $(my_div);
// text_component, image_component, tagged_component
if (div.hasClass('tagged_component')) currentType = 'tagged_component';
else if (div.hasClass('image_component')) currentType = 'image_component';
else if (div.hasClass('text_component')) currentType = 'text_component';
else currentType = 'component';

var dialog_box = $('div[id^='+currentType+'_dialog]');