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;