在jQuery中更新data-attr的值

Question

每当用户单击btn时，我需要更新一个数据属性。 但它不应该如何工作。 这是一个演示代码：

$('div.wrapper').on('click', 'div.btn', function(){
    var thisGuy = $(this),
        offset = thisGuy.data('showreplies');
    thisGuy.attr('data-showreplies', parseInt(offset) + 10);
    $('div.dataAttr').show().text(thisGuy.data('showreplies'));
});

这是DOM：

<div class="wrapper">
    <div class='btn' data-showreplies='10'>Click Me</div>
</div>
<div class="dataAttr"></div>

我想做的是，当用户单击btn时，data-showreplies attr的值将增加到10，然后它将在div.dataAttr中显示更新的值，对于每次单击它都会执行增量。

JsFiddle链接： https ：//jsfiddle.net/hasantg/knwpdw42/6/

Answer 1

尝试改变

 thisGuy.attr('data-showreplies', parseInt(offset) + 10);

至

 thisGuy.data('showreplies', parseInt(offset) + 10);

Answer 2

数据功能也可以用作设置器：

$('div.wrapper').on('click', 'div.btn', function(){
        var thisGuy = $(this),
        offset = thisGuy.data('showreplies');
        thisGuy.data('showreplies', parseInt(offset) + 10);
        $('div.dataAttr').show().text(thisGuy.data('showreplies'));
});

请注意，DOM中的属性保持为10，因为jQuery具有用于数据值的内部缓存。