如何在jquery中進行計數，加減法

Question

我有這個小腳本。 我需要在購物籃中添加和刪除元素。 因此，我有一個簡單的計數器，但它不能正常工作。 當我解析實際數字並添加另一個時，everythin很好，但是-我無法添加另一個，並且當我減去時，它給我帶來了零。 你能幫助我嗎？ 我的代碼和一些小提琴http://jsfiddle.net/5vuJQ/ ：

$(function(products_counter){
    var n = parseInt($('.lce_number').text());
    var n_place = $('.lce_number');
    $('.lce_add').live('click', function(){
        n_place.empty().append(n + 1);
    });
    $('.lce_remove').live('click', function(){
        n_place.empty().append(n - 1);
    });
});

Answer 1

您必須在每次點擊中從.lce_number提取數字。 注意，不建議使用live()方法，而應使用on() 。

var n_place = $('.lce_number');
$('.line_count_elements').on('click', '.lce_add', function() {
    var n = parseInt(n_place.text(), 10);
    n_place.html(n + 1);
});
$('.line_count_elements').on('click', '.lce_remove', function() {
    var n = parseInt(n_place.text(), 10);
    n_place.html(Math.max(0, n - 1));
});​

演示： http : //jsfiddle.net/5vuJQ/7/

Answer 2

您可以嘗試以下方法：

http://jsfiddle.net/5vuJQ/8/

$(function(products_counter){
        var n = parseInt($('.lce_number').text());
        var n_place = $('.lce_number');
        $('.lce_add').on('click', function(){
            n_place.empty().append(++n);
        });
        $('.lce_remove').on('click', function(){
            if(n>0)
              n_place.empty().append(--n);
        });
    });​

Answer 3

$(function(products_counter){
    var n = parseInt($('.lce_number').text());
    $('.lce_add').live('click', function(){
       $('.lce_number').text(parseInt($('.lce_number').text())+1);
    });
    $('.lce_remove').live('click', function(){
         $('.lce_number').text(parseInt($('.lce_number').text())-1);
    });
});

演示在這里： http : //jsfiddle.net/Zzbet/

Answer 4

$(function(products_counter){
    var n_place = $('.lce_number');
    $('.lce_add').live('click', function(){
        var n = parseInt($('.lce_number').text());
        n_place.empty().append(n + 1);
    });
    $('.lce_remove').live('click', function(){
        var n = parseInt($('.lce_number').text())
        n_place.empty().append(n - 1);
    });
});

Answer 5

$(function(products_counter){      
    var n_place = $('.lce_number');
    $('.lce_add').live('click', function(){
        var n = parseInt($('.lce_number').text());
        n_place.empty().append(n + 1);
    });
    $('.lce_remove').live('click', function(){
        var n = parseInt($('.lce_number').text());
        n_place.empty().append(n - 1);
    });
});

每次點擊后，您需要獲取n的值！

Answer 6

$('.lce_add').live('click', function(){
        n_place.empty().append(n + 1);
    });

您代碼中的上述各行並未修改' n '的值

從 -n = 1開始
第一次單擊 -append（n + 1）-> 1+ 1 --->結果顯示為2
n 仍然是1
第2次點擊 -append（n + 1）-> 1 + 1->再次顯示2
n仍為1，因此重復

您需要在調用append（） 之前修改' n '的值

 $('.lce_add').live('click', function(){
        n = n + 1;
        n_place.empty().append(n);
    });

http://jsfiddle.net/5tbqX/1/