html "đĩa dữ liệu" thuộc tính như javascript tham số

Question

phép nói rằng tôi có điều này:

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

Và đây:

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

Vâng điều này là không làm việc nhưng tôi hoàn toàn không có ý tưởng tại sao. ai đó có thể đăng một ví dụ làm việc xin vui lòng?

Answer 1

Cách dễ nhất để có được data-* thuộc tính là với element.getAttribute():

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

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

---

Mặc dù tôi sẽ đề nghị chỉ đi this để fun(), và nhận được 3 thuộc tính bên trong chức năng fun:

onclick="fun(this);" 

Và sau đó:

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/

---

Cách mới để truy cập chúng bằng tài sản là với dataset, nhưng đó không phải được hỗ trợ bởi tất cả các trình duyệt . Bạn sẽ nhận được chúng như sau:

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

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

---

Cũng lưu ý rằng trong HTML của bạn, không nên có dấu phẩy ở đây:

data-name="bbb", 

---

Tài liệu tham khảo:

• element.getAttribute(): https://developer.mozilla.org/en-US/docs/DOM/element.getAttribute
• .dataset: https://developer.mozilla.org/en-US/docs/DOM/element.dataset
• .dataset trình duyệt tương thích: 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'); 
} 

nhưng tôi đang sử dụng jQuery.