HTML「數據 - 」屬性，如JavaScript參數

Question

可以說我有這樣的：

<div data-uid="aaa" data-name="bbb", data-value="ccc" onclick="fun(this.data.uid, this.data-name, this.data-value)"> 

這：

function fun(one, two, three) { 
    //some code 
} 

嗯，這是行不通的，但我完全不知道爲什麼。有人可以發佈一個工作示例嗎？

Answer 1

得到data-*屬性最簡單的方法是element.getAttribute()：

onclick="fun(this.getAttribute('data-uid'), this.getAttribute('data-name'), this.getAttribute('data-value'));" 

DEMO：http://jsfiddle.net/pm6cH/

---

雖然我建議剛好路過this到fun()，並獲得3個屬性裏面fun功能：

onclick="fun(this);" 

然後：

function fun(obj) { 
    var one = obj.getAttribute('data-uid'), 
     two = obj.getAttribute('data-name'), 
     three = obj.getAttribute('data-value'); 
} 

DEMO：http://jsfiddle.net/pm6cH/1/

---

通過屬性來訪問他們的新方法是用dataset，但並非所有瀏覽器都支持。你會得到他們這樣的：

this.dataset.uid 
// and 
this.dataset.name 
// and 
this.dataset.value 

DEMO：http://jsfiddle.net/pm6cH/2/

---

還要注意，在你的HTML，不應該有一個逗號在這裏：

data-name="bbb", 

---

個參考文獻：

• element.getAttribute()：https://developer.mozilla.org/en-US/docs/DOM/element.getAttribute
• .dataset：https://developer.mozilla.org/en-US/docs/DOM/element.dataset
• .dataset瀏覽器的兼容性：http://caniuse.com/dataset

Answer 2

HTML：

<div data-uid="aaa" data-name="bbb", data-value="ccc" onclick="fun(this)"> 

的JavaScript：

function fun(obj) { 
    var uid= $(obj).attr('data-uid'); 
    var name= $(obj).attr('data-name'); 
    var value= $(obj).attr('data-value'); 
} 

，但我使用jQuery。