如何使用 Jquery 获得自定义属性答案

【问题标题】：How would one get a custom attribute with Jquery如何使用 Jquery 获得自定义属性
【发布时间】：2011-07-11 03:45:36
【问题描述】：

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

如何获得价值。这不起作用。

this.attr('data-ref');

任何想法，

太棒了

【问题讨论】：

好吧，如果它被称为“date-ref”，那么您可能不想选择“data-ref”，所以我希望其中一个是您问题中的错字！
好吧，您的问题表明该属性称为“date-ref”（带有 e），而您的 jQuery 正在寻找“data-ref”（带有 a）。我不是故意要狡猾，但这是问题所在吗？

标签： jquery forms checkbox custom-attributes

【解决方案1】：

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

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

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

JS Fiddle demo.

确实，问题似乎在于您没有使用 jQuery 对象：

this.attr('data-ref');

Can't work

另一方面，要使用 DOM 检索 data-* 属性，您可以选择：

this.getAttribute('data-ref');

或者：

this.dataset.ref;

或者：

this.dataset['ref'];

【讨论】：

【解决方案2】：

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

应该绝对有效。

也许您可以发布您的 html 代码。

【讨论】：

【解决方案3】：

也许你必须使用：

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

但这不是很漂亮！使用jQuery.data()将数据存储到DOM节点。

存储：

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

得到：

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

【讨论】：

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

【解决方案4】：

前面讲的attr()是如何获取自定义属性。但是，还要注意，如果您使用 HTML5 的 data-* 属性，您现在还可以利用 jQuery 的 .data() 来访问该数据：

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

【讨论】：

【解决方案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>

【讨论】：