使用jquery增加和减少输入值

Question

I need to increase and decrease the value of inputs when clicking the + and - buttons but it doesn't seem to work. 单击+和 - 按钮时，我需要增加和减少输入值，但它似乎不起作用。 I got the code from this post: How to increase the value of a quantity field with jQuery? 我从这篇文章中得到了代码：如何使用jQuery增加数量字段的值？ When clicking on the add button, I inserted a console.log statement for debugging purposes and surprisingly, I get a value of 3 even though I clicked on a button with an id of add1. 当单击添加按钮时，我插入了一个console.log语句用于调试目的，令人惊讶的是，即使我点击了id为add1的按钮，我得到的值为3。 Would really appreciate it if you could point out to me the error, thanks! 如果你能指出我的错误，真的很感激，谢谢！

HTML: 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: 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/ jsfiddle - http://jsfiddle.net/hMS6Y/

Answer 1

Try this in a simple way using class , 使用class以一种简单的方式尝试这个，

HTML 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>

SCRIPT 脚本

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

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

Alternatively, you can short your code like, 或者，你可以缩短代码，如，

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

Answer 2

The issue at hand is that the value of i is 3 by the time the loop ends. 手头的问题是在循环结束时i的值是3 。 What you want to do is save the value of each iteration so that when the click event fires it will still hold the correct value (the value at the time of the event being wired up). 你想要做的是保存每次迭代的值，这样当click事件触发时它仍将保持正确的值（事件被连线时的值）。 One way to do this is with what are called closures. 一种方法是使用所谓的闭包。 Closures basically close around the value and save the function call with the value used to be called later. 闭包基本上围绕该值闭合，并使用以后调用的值保存函数调用。 One way to accomplish this is with a function factory. 实现此目的的一种方法是使用功能工厂。

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

At this point all you need to do is change the click event as follows: 此时，您需要做的就是更改click事件，如下所示：

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

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

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

Answer 3

Your variable i is global in the case it will actually work for #add3, #minus3. 你的变量i是全局的，它实际上适用于＃add3，＃minus3。 Here in code you can try this thing- 在代码中你可以尝试这个东西 -

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

Hope this will help. 希望这会有所帮助。

Answer 4

in for loop i value become 3 在for循环中， i值变为3

DEMO DEMO

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

Answer 5

Working code. 工作代码。

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

            });

        });
    });

Answer 6

<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>

使用jquery增加和减少输入值

问题描述

6 个解决方案

解决方案1
12 已采纳 2013-10-02 04:20:45

解决方案2
1 2013-10-02 04:29:16

解决方案3
0 2013-10-02 04:18:26

解决方案4
0 2013-10-02 04:20:17

解决方案5
0 2013-10-02 04:40:58

解决方案6
0 2016-10-05 22:44:31

使用jquery增加和减少输入值

问题描述

6 个解决方案

解决方案1 12 已采纳 2013-10-02 04:20:45

解决方案2 1 2013-10-02 04:29:16

解决方案3 0 2013-10-02 04:18:26

解决方案4 0 2013-10-02 04:20:17

解决方案5 0 2013-10-02 04:40:58

解决方案6 0 2016-10-05 22:44:31

解决方案1
12 已采纳 2013-10-02 04:20:45

解决方案2
1 2013-10-02 04:29:16

解决方案3
0 2013-10-02 04:18:26

解决方案4
0 2013-10-02 04:20:17

解决方案5
0 2013-10-02 04:40:58

解决方案6
0 2016-10-05 22:44:31