如何使用data-属性通过jQuery传递值? [英] How do I use the data- attribute to pass values with jQuery?

问题描述

我想了解更多关于将data- *属性与HTML一起使用及其在jQuery中的用法的信息.我只是尝试使用.data()和/或.attr()来检索data-attribute-name ="a value" ，都使用以下方法将它们记录为未定义".如何使用data-属性通过jQuery传递值?

I'd like to know more about using data-* attributes with HTML and its use within jQuery. I'm simply trying to retrieve data-attribute-name="a value" with .data() and or .attr() both are logging as 'undefined' with the following methods below. How do I use the data- attribute to pass values with jQuery?

HTML

<li class="als-item">
    <a data-loc-subject="test value">
        <img src="clock.png"/>
    </a>Beach
</li>

JS

$( ".als-item" ).click(function(e) {
e.preventDefault();

var data = $('.als-item').data('data-loc-subject');
var attrmethod = $('.als-item').attr('data-loc-subject');
    console.log(data);
    console.log(attrmethod);
});

jsFiddle

推荐答案

您无需在数据名称前添加单词data.

You don't need to prefix the data name with the word data.

$( ".als-item > a" ).click(function(e) {
    e.preventDefault();

    var data = $('.als-item').data('loc-subject');
    var attrmethod = $('.als-item').attr('data-loc-subject');
        console.log(data);
        console.log(attrmethod);
});

http://jsfiddle.net/thinkingmedia/c6kYT/

您可以使用数据属性将数据值硬编码到DOM中.例如；

You can hard code data value into the DOM using data attributes. For example;

<a href="#" data-john="smith">Something</a>
console.log($("a").data("john"));
// will output "smith"

之所以可行，是因为jQuery将数据与属性区别对待.它将首先检查DOM元素是否包含名为data-john的属性，以及是否确实返回了该值.如果不包含该属性，它将查看附加到DOM元素的内部数据.如果该数据存在，它将返回该值.

That works because jQuery treats data differently from attributes. It will first check if the DOM element contains an attribute called data-john, and if it does return that value. If it does not contain that attribute it will look at internal data attached to the DOM element. If that data exists it will return that value.

使用jQuery设置数据时，它不会更新DOM元素的属性.它将在内部将数据附加到DOM元素.因此，$("a").data("house","on fire");会将字符串"on fire"存储在DOM元素中的标签"house"下.如果使用DOM检查器查看HTML.不会为该元素分配名为data-house的新属性.

When you set data using jQuery it will not update the attributes of the DOM element. It will attach the data to the DOM element internally. Therefore $("a").data("house","on fire"); will store the string "on fire" in the DOM element under a label "house". If you use the DOM inspector to look at the HTML. There will be no new attribute assigned to that element called data-house.

与使用jQuery.attr()方法不同.直接修改DOM元素的属性.

That is different from using the jQuery.attr() methods. Which directly modify a DOM element's attributes.

需要注意的是，为了访问某些HTML元素的数据属性，必须通过某个选择器(id，class等)选择该元素.您不能将"this"传递给元素上的任何方法属性，也不能使用该参数来访问数据.它将产生一个未定义的.

HTML

Something to note is that in order to access the data attributes of some HTML element, you must select the element via some selector (id,class,etc). You cannot pass "this" to any method attribute on the element and use that argument to access the data. It will produce an undefined.

HTML

<li class="als-item">
    <button onclick="somefunc1(this)" id="mybutton" 
        data-loc-subject="test value">My Button</button>
</li>

JS

function somefunc1(button) {
  // this alert prints "undefined"
  alert($(this).data('loc-subject'));
  // this will print "test value"
  alert($('#mybutton').data('loc-subject'));
}

柱塞

这篇关于如何使用data-属性通过jQuery传递值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！