堆栈内存溢出
  繁体   English   中英

使用jquery增加和减少输入值

[英]Increase and decrease values for inputs using jquery

 原文  2013-10-02 04:02:51  9   6    javascript/ jquery

问题描述

单击+和 - 按钮时，我需要增加和减少输入值，但它似乎不起作用。 我从这篇文章中得到了代码： 如何使用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/

6 个解决方案

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

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

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

手头的问题是在循环结束时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);
    };
};

此时，您需要做的就是更改click事件，如下所示： 

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

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

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

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

你的变量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);
            }
        });
    }
});

希望这会有所帮助。

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

在for循环中， i值变为3

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

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

工作代码。 

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

            });

        });
    });

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何增加或减少数组的多个输入的值？ 使用 jquery 增加或减少值 使用Jquery / js使用按钮/输入增加/减少输入整数字段集的值 动态增加和减少jQuery滑块值 如何使用jquery单独增加或减少一个值 增加和减少值 如何使用JQuery增加或减少jquery滑块值？ 如何使用输入文本增加或减少带有新值的图像大小？ jQuery的宽度增加/减少滚动 jQuery在滚动时增加和减少值
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM