在jQuery中更新data-attr的值

Question

每次用户点击btn时我都需要更新data-attr。但它不应该如何工作。这是一个演示代码：

$('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具有数据值的内部缓存。