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);        
});

得到NaN错误

2 个答案: