如何在變量中存儲兩個點擊計數器並使用它進行一些計算 - jQuery的

Question

我有一個「下一個」和「預覽」股利點擊。使用以下代碼，可以將計數的點擊數存儲到每個div的變量中。單擊時顯示結果的警報框。到現在爲止還挺好。 但我不知道爲什麼計算「var countNext」和「var countPrev」不起作用！
單擊#test div「var countResult」始終爲「0」以提醒結果。

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

你知道它有什麼問題嗎？

Answer 1

你需要在每次點擊發生

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

Answer 2

我認爲唯一的問題與您的代碼不會在你的div再存放計數器數據的時間重新計算countResults。您只需獲取該值並使用它，但當您單擊該按鈕時，將增加這些變量，但不會將其存儲在您的div數據中。所以

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

和同爲countPrev

Answer 3

只是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

Answer 4

爲什麼不更新的數據屬性既然你已經有他們，而不是使用全局變量？

$('#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); 
    }); 

Answer 5

增加了幾個修正，但主要是一個在移動點擊新結果的計算。

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