javascript - 出现 NaN 错误

Question

我正在使用 jQuery.data来存储元素的点击次数。我可以很好地添加值，但减去会产生 NaN 错误。价值只会增加。我怎样才能解决这个问题？

HTML：

<div data-click="0">Click here</div>

JS：

$("div").on("click", function(){
    console.log('Current: '+$(this).data('click'))
    $(this).data('click',$(this).data('click')+1);
    setTimeout(function(){
        $(this).data('click',$(this).data('click')-1);
        console.log('After: '+$(this).data('click'))
    },1000);        
});

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

Answer 1

在setTimeout回调内部时，this没有您期望的值。以这种方式保存它：

var that = this;
setTimeout(function(){
    $(that).data('click',$(that).data('click')-1);
    console.log('After: '+$(that).data('click'))
},1000);

事实上，$(this)在那个片段中出现了很多次，缓存它听起来是个好主意。此外，它还消除了查看以下内容的需要this：

var $this = $(this);
console.log('Current: '+$this.data('click'))
$this.data('click',$this.data('click')+1);
setTimeout(function(){
    $this.data('click',$this.data('click')-1);
    console.log('After: '+$this.data('click'))
},1000);

Answer 2

您还可以this像这样（通过调用bind）在函数内设置范围：

$("div").on("click", function(){
    console.log('Current: '+$(this).data('click'))
    $(this).data('click',$(this).data('click')+1);
    setTimeout(function(){
        $(this).data('click',$(this).data('click')-1);
        console.log('After: '+$(this).data('click'))
    }.bind(this),1000);        
});