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

グローバル変数を使用する代わりに、すでにデータ属性を持っているので、データ属性を更新してみませんか？

$('#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 に答える
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 に答える