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

Question

我有一个链接，当按下时，一个 div 的文本和数据属性的值正在改变。 当按下时我有另一个链接我得到那些改变的值。 这是代码:

<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') 的 data-test 属性，如果它还没有存储的话。所以它提供了 .removeData方法，您可以在更改属性时调用该方法以强制 jQuery 下次再次从属性中检索 .data('test'):

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

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

---

但是，最好保持一致并使用 .attr() 或 .data() 来设置和获取值:

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