Jquery：创建隐藏的属性？我需要减少标签bulkyness

Question

我敢肯定，我们以前都做过这样的：

<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'); 

THEN BAM !!!! POW !!!!

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

你知道他的群体颜色......所有这些都没有在我们的标签中加入一堆臃肿元素跟踪废话。

那么这种事情是否存在？如果没有，我该怎么做？

Answer 1

可以使用.data()只是为此:)，像这样：

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

注：ID不能以数字开头，忽略以匹配您的例子！

而获得的价值：如果您需要通过用户名查找仍然使用.filter()这样

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

：

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'); 

你看的模式，只是用这个任何常用属性你需要过滤。

Answer 2

如果您不想按其他人的建议使用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;