Jquery: создать скрытые атрибуты? Мне нужно уменьшить громоздкость тега - PullRequest
Новая
       12

Jquery: создать скрытые атрибуты? Мне нужно уменьшить громоздкость тега

0 голосов
/ 17 апреля 2010

Я уверен, что все мы делали это раньше: 

<a id="232" rel="link_to_user" name="user_details" class="list hoverable clickable selectable">
USER #232
</a>

Но затем мы говорим: о боже, мне нужно больше способов хранить информацию об отслеживании этого div! 

<a id="232-343-22" rel="link_to_user:fotomeshed" name="user_details" class="groupcolor-45 elements-698 list hoverable clickable selectable">
User: John Doe
</a>

И болезнь продолжает расти. Мы просто продолжаем упаковывать его в этот бедный маленький элемент и его атрибуты. Все, чтобы мы могли отслеживать, кто это.

Итак, с моим ограниченным знанием JS, кто-нибудь, пожалуйста, скажите мне, как сделать что-то вроде этого: 

<a id="33">USER #33</a>

$(#33).attr({title:'User Record','username':'john', 'group_color':'green', 'element_num':78});

Итак, мы просто добавили то, что я назвал бы невидимыми атрибутами, потому что мы просто играли в Бога и создавали эти атрибуты на лету, как будто это не проблема. Крутая часть в том, что они будут храниться в своем собственном маленьком предмете где-то в переменной земле. НЕ в самом теге.

Затем, в коде, вложенном далеко-далеко, я смогу сказать, о, мне интересно, что такое group_color Джон ... 

user_group_color = $(table).find(a['username':'john']).attr('group_color');

ТОГДА БАМ !!!! POW !!!! 

alert(user_group_color + " is a bitchin color!");

Вы узнаете цвет его группы ... и все это, не добавляя кучу вздутой ерунды в отслеживание элементов в наши теги.

Так существует ли такая вещь? Если нет, то как мне это сделать?

Ответы [ 2 ]

3 голосов
/ 17 апреля 2010

Вы можете использовать .data() только для этой цели :), например: 

$("#33").data({title:'User Record','username':'john', 'group_color':'green', 'element_num':78});

Примечание. Идентификаторы не могут начинаться с цифры, игнорируя ее в соответствии с вашим примером!

И чтобы получить значение: 

user_group_color = $('table').find('a').data('group_color');

Если вам нужно найти имя пользователя, используйте .filter(), например: 

user_group_color = $('table').find('a').filter(function() {
  return $(this).data('username') === 'john';
}).data('group_color');

Не непосредственно к вопросу, но, возможно, экономит время. Вы также можете сделать это селектором, например так: 

jQuery.expr[":"].username = function(a, b, m) {
  return jQuery(a).data('username') == m[3];
};

Тогда выбор элемента по имени пользователя будет выглядеть так: 

user_group_color = $('table').find('a:username(john)').data('group_color');

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

0 голосов
/ 17 апреля 2010

Если вы не хотите использовать jQuery.data, как это было предложено другими, по какой-либо причине, нет причины, по которой вы не можете связать данные со своими элементами по ID (или любому другому атрибуту). Например:

HTML: 

<span id='foo1'>blah blah blah</span>
<span id='foo2'>blah blah blah</span>

Javascript: 

var elementData = {
    foo1: {
       x: 1,
       y: 2
    },
    foo2: {
       x: 3,
       y: 4
    },
};

Использование: 

var foo = /* ...get one of the `fooX` elements ... */;
var fooData = elementData[foo.attr('id')];
alert(fooData.x); // alerts 1 or 3 depending on which `foo` you have

Добавление новых данных на лету: 

elementData[newID] = {
   x: 42,
   y: 73
};

Изменение данных на лету: 

elementData[theID].x = 27;
...