如何使用Jquery获取自定义属性

Question

在这种情况下，我们的复选框上有一个自定义属性，叫做data-ref。

那么如何获取其值呢？使用以下代码并不能成功：

this.attr('data-ref');

任何想法，太棒了。

- RIK

---

如果它被称为“date-ref”，那么您可能不想选择“data-ref”，所以我希望这些中的一个是您问题中的拼写错误！ - Matt Gibson

好的，你的问题说明属性名叫做 "date-ref"（带有一个 'e'），而你的 jQuery 却在寻找 "data-ref"（带有一个 'a'）。我不是要表现得聪明，但这就是问题所在吗？ - John Bledsoe

Answer 1

您知道在您的文本中，自定义属性“date-ref”和jQuery中的“data-ref”存在差异吗？

此外，您可能会发现使用jQuery对象更加容易：

$(this).attr('data-ref');

JS Fiddle演示。

问题实际上似乎是你没有使用jQuery对象：

this.attr('data-ref');

无法工作

另一方面，使用DOM检索data-*属性时，您有以下选项：

this.getAttribute('data-ref');

或者：

this.dataset.ref;

或者：

this.dataset['ref'];

- David Thomas

Answer 2

$("selector").attr("data-ref");

这个肯定有效。

也许你可以发一下你的html代码。

- Nealv

Answer 3

前面提到的attr()是获取自定义属性的方法。但是请注意，如果您正在使用HTML5的data-*属性，您现在也可以利用jQuery的.data()来访问这些数据：

http://api.jquery.com/data/

- DA.

Answer 4

也许你需要使用：

$(this).attr('data-ref');

但这样不太美观！ 使用jQuery.data()将数据存储到DOM节点中。

存储：

$('#divid').data('data-ref', 'i am data');

获取：

var data = $('#divid').data('data-ref');

- felixsigl

---

使用“.data()”API时，HTML5中的“data-foo”属性应该被引用为“foo”。 - Pointy

Answer 5

你的实现问题可能与你对此的使用有关。也许应该是$(this)，或者你可能没有正确绑定。我找不到任何问题...请参见http://jsfiddle.net/nvkVy/2/

<a href='api.fatherstorm.com' data-ref='test' data:ref='test' data_ref='test' class='testable'>test me</a>

<script>
$(document).ready(function(){

    $('.testable').click(function(){

       alert('data-ref='+$(this).attr('data-ref'));
        alert('data:ref='+$(this).attr('data:ref'));
        alert('data_ref='+$(this).attr('data_ref'));
        return(false);
    }); 
});
</script>

- FatherStorm