6

单击 + 和 - 按钮时，我需要增加和减少输入的值，但它似乎不起作用。我从这篇文章中得到了代码：如何使用 jQuery 增加数量字段的值？单击添加按钮时，我插入了一个用于调试目的的 console.log 语句，令人惊讶的是，即使我单击了一个 ID 为 add1 的按钮，我得到的值为 3。如果您能指出错误，将不胜感激，谢谢！

HTML：

<body>
    <p>
        <img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20">
        <input id="qty1" type="text" value="1">
        <img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20">
    </p>

    <p>
        <img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20">
        <input id="qty2" type="text" value="1">
        <img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20">
    </p>
</body>

jQuery：

$(function () {
    var numButtons = 2;
    //console.log(typeof(numButtons));
    //console.log(numButtons);
    for (var i = 1; i <= numButtons; i++) {

        $("#add" + i).click(function () {
            console.log(i);
            var currentVal = parseInt($("#qty" + i).val());
            //console.log(currentVal);
            if (!isNaN(currentVal)) {
                $("#qty" + i).val(currentVal + 1);
            }
        });

        $("#minus" + i).click(function () {
            var currentVal = parseInt($("#qty" + i).val());
            if (!isNaN(currentVal) && currentVal > 0) {
                $("#qty" + i).val(currentVal - 1);
            }
        });
    }
});

jsfiddle - http://jsfiddle.net/hMS6Y/

4

6 回答 6

12

用简单的方法试试这个class，

HTML

<body>
    <p>
        <img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20" class="minus"/>
        <input id="qty1" type="text" value="1" class="qty"/>
            <img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add"/>
    </p>
    <p>
        <img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20" class="minus"/>
        <input id="qty2" type="text" value="1" class="qty"/>
        <img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add"/>
    </p>
</body>

脚本

$(function () {
    $('.add').on('click',function(){
        var $qty=$(this).closest('p').find('.qty');
        var currentVal = parseInt($qty.val());
        if (!isNaN(currentVal)) {
            $qty.val(currentVal + 1);
        }
    });
    $('.minus').on('click',function(){
        var $qty=$(this).closest('p').find('.qty');
        var currentVal = parseInt($qty.val());
        if (!isNaN(currentVal) && currentVal > 0) {
            $qty.val(currentVal - 1);
        }
    });
});

小提琴：http: //jsfiddle.net/hMS6Y/2/

或者，您可以缩短您的代码，例如，

$(function() {
  $('.minus,.add').on('click', function() {
    var $qty = $(this).closest('p').find('.qty'),
      currentVal = parseInt($qty.val()),
      isAdd = $(this).hasClass('add');
    !isNaN(currentVal) && $qty.val(
      isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal)
    );
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>
  <img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20" class="minus" />
  <input id="qty1" type="text" value="1" class="qty" />
  <img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add" />
</p>
<p>
  <img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20" class="minus" />
  <input id="qty2" type="text" value="1" class="qty" />
  <img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add" />
</p>

于 2013-10-02T04:20:45.430 回答
1

手头的问题是循环结束时的i值3。您要做的是保存每次迭代的值，以便在click事件触发时它仍然保持正确的值（事件连接时的值）。一种方法是使用所谓的闭包。闭包基本上围绕该值关闭，并将函数调用与稍后调用的值一起保存。实现此目的的一种方法是使用函数工厂。

function add(value){
    console.log(value);
    var currentVal = parseInt($("#qty" + value).val());    
    if (!isNaN(currentVal)) {
        $("#qty" + value).val(currentVal + 1);
    }
};

function addClosure(value){
    return function(){
        add(value);
    };
};

此时您需要做的就是将点击事件更改如下：

$("#add" + i).click(addClosure(i));

JSFiddle：http: //jsfiddle.net/infiniteloops/y9huk/

MDN 闭包：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

于 2013-10-02T04:29:16.337 回答
0

工作代码。

<body>
    <div id='placeholder'>
    <p>
        <img src="http://i.imgur.com/yOadS1c.png" act='min' id="1" width="20" height="20" />
        <input id="qty1" type="text" value="1">
        <img src="http://i.imgur.com/98cvZnj.png" act='add' id="1" width="20" height="20" />
    </p>
    <p>
        <img src="http://i.imgur.com/yOadS1c.png" act='min' id="2" width="20" height="20" />
        <input id="qty2" type="text" value="1">
        <img src="http://i.imgur.com/98cvZnj.png" act='add' id="2" width="20" height="20" />
    </p>
    </div>
</body>



$(function () {
        $('#placeholder img').each(function(){
            $(this).click(function(){

            $action = $(this).attr('act');        
            $id = $(this).attr('id');
            $val = parseInt($('#qty'+$id).val());

            if($action == 'add'){
                $val = $val + 1;
            } else {
                if($val > 0){
                    $val = $val - 1;    
                }
            }
            $('#qty'+$id).val($val);

            });

        });
    });
于 2013-10-02T04:40:58.870 回答
0

在 for 循环i值变成3

演示

$(function () {

    $("#add1").click(function () {
            add(1);
    });

    $("#minus1").click(function () {
        minus(1);
    });

$("#add2").click(function () {
            add(2);
    });

    $("#minus2").click(function () {
        minus(2);
    });
});

function add(i){
var currentVal = parseInt($("#qty" + i).val());

        if (!isNaN(currentVal)) {
            $("#qty" + i).val(currentVal + 1);
        }
}

function minus(i){
  var currentVal = parseInt($("#qty" + i).val());
        if (!isNaN(currentVal) && currentVal > 0) {
            $("#qty" + i).val(currentVal - 1);
        }
}
于 2013-10-02T04:20:17.990 回答
0 
<div class="box-qty">
<a href="javascript:void(0);" class="quantity-minus">-</a>
<input type="text" name="p_quantity" id="qnt" class="quantity" value="1">
<a href="javascript:void(0);" class="quantity-plus">+</a>
</div>

<script>
$(".quantity-plus").click(function(){     
 $("#qnt").val(Number($("#qnt").val())+1);
});

$(".quantity-minus").click(function(){
 if($("#qnt").val()>1)
 $("#qnt").val(Number($("#qnt").val())-1);     
});
<script>
于 2016-10-05T22:44:31.567 回答
-1

您的变量 i 是全局变量，如果它实际上适用于 #add3、#minus3。在代码中你可以试试这个东西-

$(function () {
    var numButtons = 2;
    //console.log(typeof(numButtons));
    //console.log(numButtons);
    for (var i = 1; i <= numButtons; i++) {
        var t = i; //Now t is local 
        $("#add" + t).click(function () {
            console.log(t);
            var currentVal = parseInt($("#qty" + t).val());
            //console.log(currentVal);
            if (!isNaN(currentVal)) {
                $("#qty" + t).val(currentVal + 1);
            }
        });

        $("#minus" + t).click(function () {
            var currentVal = parseInt($("#qty" + t).val());
            if (!isNaN(currentVal) && currentVal > 0) {
                $("#qty" + t).val(currentVal - 1);
            }
        });
    }
});

希望这会有所帮助。

于 2013-10-02T04:18:26.993 回答