如何在变量中存储两个点击计数器并使用它进行一些计算 - jQuery的

问题描述：

我有一个“下一个”和“预览”股利点击。使用以下代码，可以将计数的点击数存储到每个div的变量中。单击时显示结果的警报框。到现在为止还挺好。但我不知道为什么计算“var countNext”和“var countPrev”不起作用！
单击#test div“var countResult”始终为“0”以提醒结果。如何在变量中存储两个点击计数器并使用它进行一些计算 - jQuery的

var countNext = ($('#next').data('click_count') || 0); 
var countPrev = ($('#prev').data('click_count') || 0); 
var countResult = countNext - countPrev; 

    $('#next').on('click', function() { 
    countNext++; 
    alert(countNext);   
    }); 

    $('#prev').on('click', function() { 
    countPrev++;   
    alert(countPrev);   
    }); 

    $('#test').on('click', function() { 
    alert(countResult);   
    });

你知道它有什么问题吗？

答

你需要在每次点击发生

var countNext = ($('#next').data('click_count') || 0); 
var countPrev = ($('#prev').data('click_count') || 0); 
var countResult = countNext - countPrev; 

    $('#next').on('click', function() { 
    countNext++; 
    countResult = countNext - countPrev; 
    alert(countNext);   
    }); 

    $('#prev').on('click', function() { 
    countPrev++;  
    countResult = countNext - countPrev; 
    alert(countPrev);   
    }); 

    $('#test').on('click', function() { 
    alert(countResult);   
    });

答

我认为唯一的问题与您的代码不会在你的div再存放计数器数据的时间重新计算countResults。您只需获取该值并使用它，但当您单击该按钮时，将增加这些变量，但不会将其存储在您的div数据中。所以

$('#next').on('click', function() { 
    countNext++; 
    alert(countNext);   
    $('#next').data('click_count',countNext); 
});

和同为countPrev

答

只是incremeting变量一点儿也不店它的数据（）对象：

$('#next, #prev').data('click_count', 0).on('click', function() { 
    $(this).data('click_count', $(this).data('click_count') + 1); 
}); 

$('#test').on('click', function() { 
    alert($('#next').data('click_count') - $('#prev').data('click_count')); 
});

FIDDLE

答

为什么不更新的数据属性既然你已经有他们，而不是使用全局变量？

$('#next').on('click', function() { 
    var $this = $(this), new_click_count = $this.data('click_count') + 1; 

    $this.data('click_count', new_click_count); 
    alert(new_click_count);   
}); 

$('#prev').on('click', function() { 
    var $this = $(this), new_click_count = $this.data('click_count') + 1; 

    $this.data('click_count', new_click_count); 
    alert(new_click_count);   
}); 

$('#test').on('click', function() { 
    var next_count = $('#next').data('click_count'), prev_count = $('#prev').data('click_count'), countResult = next_count - prev_count; 

    alert(countResult); 
});

，你可以简化成：

$('#next, #prev').on('click', function() { 
     var $this = $(this), new_click_count = $this.data('click_count') + 1; 

     $this.data('click_count', new_click_count); 
     alert(new_click_count);   
    }); 

$('#test').on('click', function() { 
     var next_count = $('#next').data('click_count'), prev_count = $('#prev').data('click_count'), countResult = next_count - prev_count; 

     alert(countResult); 
    });

答

增加了几个修正，但主要是一个在移动点击新结果的计算。

$(document).ready(function() { 
    var countNext = 0; 
    var countPrev = 0; 

    $('#next').on('click', function() { 
    countNext++; 
    alert(countNext);   
    }); 

    $('#prev').on('click', function() { 
    countPrev++;   
    alert(countPrev);   
    }); 

    $('#test').on('click', function() { 
    var countResult = countNext - countPrev; 
    alert(countResult);   
    }); 
});

如何在变量中存储两个点击计数器并使用它进行一些计算 - jQuery的

相关推荐