jQuery访问html5数据属性答案

【问题标题】：jQuery accessing html5 data attributejQuery访问html5数据属性
【发布时间】：2013-06-05 09:23:23
【问题描述】：

单击其中一个选项时，我试图从“ul li a”中获取数据值并将其放入下面的按钮中，我在这里设置了一个小提琴示例：http://jsfiddle.net/q5j8z/4/

但似乎无法正常工作

$('ul li a').click(function(e) {
    e.preventDefault();

    var value = $(this).data();

    $('.button').data('value');
});

请问有人有什么想法吗？

【问题讨论】：

看到这个修改过的小提琴jsfiddle.net/q5j8z/16

标签： jquery html5-data

【解决方案1】：

你可以这样做：

$('ul li a').click(function (e) {
    e.preventDefault();
    var value = $(this).data('value');
    $('.button').data('value', value);
    console.log($('.button').data('value'));
});

这里$(this).data('value')用于获取链接的data属性值。

而$('.button').data('value', value)用于设置按钮的data属性值。

使用console.log($('.button').data('value'));，您可以检查控制台中设置的data 值。

FIDDLE DEMO

欲了解更多信息：- .data() API Documentation

【讨论】：

@adam 很高兴它有帮助！如果您对任何 jQuery 方法有任何疑问，您可以随时访问 api.jquery.com :)

【解决方案2】：

像这样使用它：

var value = $(this).data('value');

然后：

$('.button').data('value', value);

【讨论】：

【解决方案3】：

您实际上并没有将值数据分配给按钮。试试这个：

$('ul li a').click(function(e) {
    e.preventDefault();

    var value = $(this).data();

    // assign the value form the clicked anchor to button value data
    $('.button').data('value', value);

    console.log($('.button').data('value'));
});

【讨论】：

【解决方案4】：

试试这个：

$('ul li a').click(function(e) {
        e.preventDefault();

        var value = $(this).data('value');

        $('.button').data('value', value);
    });

您可以使用 console.log 在控制台中查看按钮的值：

console.log('data: '+$(".button").data("value"));

【讨论】：

【解决方案5】：

首先，您是要插入变量 value 的值还是“值”字面量？

data() 的使用方式与attr('attr-name', attr_value) 类似，如下所示：

$('ul li a').click(function(e) {
    e.preventDefault();  
    var value = $(this).data('value');
    $('.button').data('value', value);
});

以上内容在您的小提琴中有效。

【讨论】：

【解决方案6】：

请注意，您不需要指定 data- 前缀，因为 Jquery 会自动执行此操作

因此，请确保您为下面的值使用正确的属性

$('ul li a').click(function(e) {
    e.preventDefault();
    var value = $(this).data('value');
    $('.button').data('value', value);
});

【讨论】：