0

我有一个“下一个”和“预览”的 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);        
    });

你知道它有什么问题吗？

4

5 回答 5

0

只是增加变量不会将其存储在 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'));
});

小提琴

于 2013-03-20T23:11:09.640 回答
0

为什么不更新数据属性，因为您已经拥有它们而不是使用全局变量？

$('#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); 
    });
于 2013-03-20T23:12:27.767 回答
0

添加了一些修改，但主要的修改是移动点击时新结果的计算。

$(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);        
    }); 
});
于 2013-03-20T23:12:34.583 回答
0

每次单击发生时，您都需要重新计算 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);        
    });
于 2013-03-20T23:08:45.570 回答
0

我认为您的代码的唯一错误是不要将计数器数据再次存储在您的div. 您只需获取值并使用它，但是当您单击按钮时，您会增加变量但不会将其存储在您的div数据中。所以

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

和同样的countPrev

于 2013-03-20T23:09:54.647 回答