Question

我有两个按钮，一个用于减法，另一个用于添加。我还有两个标签，一个在两个按钮之间，表示你点击了按钮多少次，而另一个标签旁边的添加按钮告诉你总数。我创建了这个的基本功能，但我现在正在尝试创建一个可以重复使用的功能来添加更多这些按钮。我有4个参数，分别是名称（按钮的类别），最大值（允许的最大总数），最小值（最大值的相反值）和步长（增加的值）。最后我有一个总数，如果我有更多的按钮/表格，它应该显示总数的值。我需要这个代码可以重复使用，以便根据需要添加更多代码。

这是我的原始代码：（http://jsfiddle.net/IrvinBurciaga/0gfrntve/）

var sum = 0;
var clicks = 0;
$('input').click(function () {
    if ($(this).hasClass('add') && sum < 25) {
        sum += 5;
        clicks++;
    }
    if ($(this).hasClass('minus') && sum > -25) {
        sum -= 5;
        clicks--;
    }

    console.log(sum);

    $('label').html(sum);
    $('.clicks').html(clicks);
});
$('label').bind('DOMSubtreeModified', function () {
    var total = sum + clicks;

    $('.total').html(total);
});

新代码无法正常工作（总和从0开始）（http://jsfiddle.net/IrvinBurciaga/uufs6xjm/）

var set = function (name, max, min, step) {

    $(name).click(function () {
        var sum = 0;
        var clicks = 0;

        if ($(this).hasClass('add') && sum < max) {
            sum += step;
            clicks++;
        }
        if ($(this).hasClass && sum > min) {
            sum -= step;
            clicks--;
        }

        console.log(sum);

        //$('label').html(sum);
        //$('.clicks').html(clicks);
    });
};
set('input', 25, -25, 5);



$('label').bind('DOMSubtreeModified', function () {
    var total = sum + clicks;

    $('.total').html(total);
});

我是jQuery / JavaScript的初学者，非常感谢任何帮助，谢谢。

Answer 1

每次点击都会重置数字，将其移至点击

之外

//sum and clicks should be defined here
$(name).click(function () {
    var sum = 0; <---wrong
    var clicks = 0; <---wrong

你搞砸了你的副本和粘贴，当然它有一个方法hasClass是真正的

if ($(this).hasClass && sum > min) {  <---wrong

Answer 2

你必须将和的声明放在一边，或者你应该在任何输入中保存它并从中再次获得。

将它们放在外面：

Fiddle is here

var sum = 0;
var clicks = 0;
set('input', 25, -25, 5);

或再次从标签中获得总和..

Fiddle is here

var sum = parseInt($('label').html());
var clicks = parseInt($('.clicks').html());

Answer 3

试试这个：

var sum = 0; 
var clicks = 0;
var set = function (name, max, min, step) {    
    $(name).click(function () {


        if ( $(this).hasClass('add') ) 
        {
            if(sum < max){
                sum += step;
                clicks++;
            }
            else{
                //sum = 0;
            }
        }
        if ($(this).hasClass('minus')) {
            if( sum > min){
                sum -= step;
                clicks++;
            }
            else{
                //sum = 0;
            }            
        }

        console.log(sum);

        $('label').html(sum);
        $('.clicks').html(clicks);
    }); 
}; 
set('input', 25, -25, 5);



$('label').bind('DOMSubtreeModified', function () {
    var total = sum + clicks;

    $('.total').html(total); 
});


//$(this).prop('disabled', false);

jQuery函数的问题

3 个答案: