如何獲取存儲在DOM元素中的數據？

Question

我有bar類的DOM元素，其存儲數據foo，這是另一個DOM元素的id。

<div class="bar" data="foo">...</div> 

當我將鼠標懸停在此元素上時，我想要獲取數據（id）指向的DOM元素。我這樣做：

$(".bar").hover(function(){alert($("#"+$(this).data()));}); 

但是，當我徘徊，我得到這個錯誤：

Uncaught Error: Syntax error, unrecognized expression: #[object Object] 

什麼我做錯了，我怎麼能解決這個問題？

Answer 1

你混淆data()方法與元素的data屬性。

data()方法返回一個不相關的數據對象附加到元素，而不是你正在尋找的字符串。

---

解決方案1 ​​ - 數據作爲一個屬性

爲了讓你在你的例子尋找的價值，你應該查詢與attr()方法的屬性：

$(".bar").hover(function(){alert($("#"+$(this).attr('data')));}); 

---

解決方案2 - 數據作爲對象

使用data()方法，你可以手動附加信息元素：

$('.bar').data('data','foo'); 
$(".bar").hover(function(){alert($("#"+$(this).data('data')));}); 

注意如何在這種情況下'data'只是在元素的數據對象的一個​​關鍵的任意名稱。欲瞭解更多的data()方法見the jQuery manual

---

解決方案3 - 數據爲對象，以及HTML5屬性

我相信你的初衷是爲了查詢data屬性作爲一個HTML5數據屬性，根據the jQuery documentation應該是automatically pulled in to jQuery's data object。

但是，請注意，根據HTML5 specification，HTML5數據屬性預計會有一個data-前綴。因此，爲了讓您的示例有效，該屬性不能命名爲data，而是data-something。例如：

<div class="bar" data-something="foo">...</div> 

然後你就可以用jQuery的data()方法訪問：

$(".bar").hover(function(){alert($("#"+$(this).data('something')));}); 

注意data-something如何與data('someting')訪問，因爲jQuery將自動刪除data-前綴。

Answer 2

您需要使用ATTR函數訪問屬性。

$(".bar").hover(function() { 
    alert($("#"+$(this).attr('data'))); 
    });