Question

我点击了“下一个”和“预览”div。使用以下代码，可以将计数的点击数存储到每个div的变量中。警告框显示单击时的结果。到现在为止还挺好。但我不知道为什么“var countNext”和“var countPrev”的任何计算都不起作用！ “var countResult”总是“0”，点击#test div来提醒结果。

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

每次点击发生时都需要重新计算countResults

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中再次存储计数器数据。您只需获取该值并使用它，但是当您单击该按钮时，您会增加变量，但不会将其存储在div数据中。所以

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

和countPrev

相同

Answer 3

仅增加变量不会将其存储在data（）对象中：

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

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

5 个答案: