Question

我有一个链接，当按下时，一个div的text和data属性的值正在改变。按下时我有另一个链接我得到了那些改变的值。这是代码：

<a class="first" href="#">change value</a>
<a class="second" href="#">get value</a>
<div class="value" data-test="test">test</div>

$(document).ready(function() {
    $('.first').on('click', function(e) {
        e.preventDefault();
        $('.value').html($(this).text()).attr('data-test',$(this).text());    
    });

    $('.second').on('click', function(e) {
        e.preventDefault();

        $value = $('.value').text();
        $data = $('.value').data('test');
        alert($data);
    });
});

http://jsfiddle.net/4daoqzc8/2/

问题是，在更改值后，我可以获得div的新文本值，但数据属性的值保持与加载dom时的值相同。如何获取数据属性的新值？

Answer 1

jQuery只会检索值data-test的{{1}}属性，如果它尚未存储的话。因此它提供了.removeData方法，您可以在更改属性时调用该方法以强制jQuery在下次再次从属性中检索.data('test')：

.data('test')

http://jsfiddle.net/mblase75/8mp6k2w2/

但是，最好保持一致，并使用$('.value').html($(this).text()) .removeData('test') .attr('data-test', $(this).text());或.attr()设置并获取值：

.data()

Answer 2

您可以使用

$data = $('.value').attr('data-test');

Answer 3

使用data函数而不是attr更改代码以设置值：

$('.value').html($(this).text())
           .data('test', $(this).text());

小提琴：http://jsfiddle.net/bo3h469a/

Answer 4

试试这个。

$data = $('.value').data()['test'];

这里jQuery Data vs Attr?是更有趣的主题。

如何在点击时获取数据属性值？

4 个答案: