Подтвердить что ты не робот

Html "data-" атрибут как параметр javascript

Предположим, у меня есть это:

<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
}

Ну, это не работает, но я понятия не имею, почему. может ли кто-нибудь опубликовать рабочий пример?

Ответ 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

Ответ 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.