如何在jquery中计数，加减数字答案

【问题标题】：How to count in jquery, adding and subtracting numbers如何在jquery中计数，加减数字
【发布时间】：2012-11-13 11:31:54
【问题描述】：

我有这个小脚本。我需要在我的购物篮中添加和删除元素。所以我有一个简单的计数器，但它不能正常工作。当我解析实际数字并添加另一个数字时，一切都很好，但是 - 我不能添加另一个数字，当我减去它时，它会给我带来一个零。你能帮助我吗？我的代码和一些小提琴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);
    });
});

【问题讨论】：

标签： javascript jquery numbers

【解决方案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/

【讨论】：

如果你使用委托，我认为你也应该使用 .off('click') 解除绑定
@roasted 你为什么这么认为？
如果元素是动态添加的，.on() 作为委托会设置多重绑定，不是吗？
如果 ihave 和 0 怎么办？我不需要 -1 元素 :)
谢谢伙计，它工作得很好，我会稍微改变一下 (jsfiddle.net/5vuJQ/9) 但非常感谢你的帮助，你 rox :)

【解决方案2】：

$(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/

【讨论】：

那么，如果 ihave 和 0 怎么办？我不需要 -1 元素 :)

【解决方案3】：

你可以试试这个：

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

【讨论】：

【解决方案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);
    });
});

【讨论】：

【解决方案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的值！

【讨论】：

【解决方案6】：

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

您的代码中的上述行没有修改'n'的值

开始时 - n = 1
第一次点击 - append(n + 1) --> 1+ 1 ---> 结果为 2正在显示
n 仍然是 1
第二次点击 - 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/

【讨论】：