Fatal编程技术网
  • javascript/
  • Javascript 如何使用jquery单独增加或减少值

Javascript 如何使用jquery单独增加或减少值

javascript jquery html

Javascript 如何使用jquery单独增加或减少值,javascript,jquery,html,Javascript,Jquery,Html,我希望通过单独单击+或-按钮来增加或减少每个产品，但问题是当我单击任何+按钮时。。当我点击-按钮时，所有产品的价值都会增加，而不是一个。请帮我解决这个问题 jquery $(document).ready( function(){ $(".quantity-adder .add-action").click( function(){ if( $(this).hasClass('add-up') ) { $("[name=quantity]",

我希望通过单独单击+或-按钮来增加或减少每个产品，但问题是当我单击任何+按钮时。。当我点击-按钮时，所有产品的价值都会增加，而不是一个。请帮我解决这个问题

jquery

 $(document).ready( function(){
    $(".quantity-adder .add-action").click( function(){
        if( $(this).hasClass('add-up') ) {  
            $("[name=quantity]",'.quantity-adder').val( parseInt($("[name=quantity]",'.quantity-adder').val()) + 1 );
        }else {
            if( parseInt($("[name=quantity]",'.quantity-adder').val())  > 1 ) {
                $("input",'.quantity-adder').val( parseInt($("[name=quantity]",'.quantity-adder').val()) - 1 );
            }
        }
    } );

});
HTML

 <div class="product-extra">
    <p>Product 1</p>
                            <div class="quantity-adder pull-left">
                                <div class="quantity-number pull-left">
                                    <span>Qutantity</span>
                                    <input type="text" name="quantity" size="2" value="1" />
                                </div>
                                <div class="quantity-wrapper pull-left">
                                    <span class="add-up add-action fa fa-plus"></span> 
                                    <span class="add-down add-action fa fa-minus"></span>
                                </div>                  
                                <input type="hidden" name="product_id" size="2" value="40" />   
                            </div>                                          

                    </div>
            <br /> 
                             <br /> 
                                   <br /> 

                       <div class="product-extra">
    <p>Product 2</p>
                            <div class="quantity-adder pull-left">
                                <div class="quantity-number pull-left">
                                    <span>Qutantity</span>
                                    <input type="text" name="quantity" size="2" value="1" />
                                </div>
                                <div class="quantity-wrapper pull-left">
                                    <span class="add-up add-action fa fa-plus"></span> 
                                    <span class="add-down add-action fa fa-minus"></span>
                                </div>                  
                                <input type="hidden" name="product_id" size="2" value="44" />   
                            </div>                                          

                    </div>
                       <br /> 
                             <br /> 
                                   <br /> 
                                   <div class="product-extra">
    <p>Product 3</p>
                            <div class="quantity-adder pull-left">
                                <div class="quantity-number pull-left">
                                    <span>Qutantity</span>
                                    <input type="text" name="quantity" size="2" value="1" />
                                </div>
                                <div class="quantity-wrapper pull-left">
                                    <span class="add-up add-action fa fa-plus"></span> 
                                    <span class="add-down add-action fa fa-minus"></span>
                                </div>                  
                                <input type="hidden" name="product_id" size="2" value="48" />   
                            </div>                                          

                    </div>
            <br /> 
                             <br /> 
                                   <br /> 

                       <div class="product-extra">
    <p>Product 4</p>
                            <div class="quantity-adder pull-left">
                                <div class="quantity-number pull-left">
                                    <span>Qutantity</span>
                                    <input type="text" name="quantity" size="2" value="1" />
                                </div>
                                <div class="quantity-wrapper pull-left">
                                    <span class="add-up add-action fa fa-plus"></span> 
                                    <span class="add-down add-action fa fa-minus"></span>
                                </div>                  
                                <input type="hidden" name="product_id" size="2" value="55" />   
                            </div>                                          

                    </div>
                       <br /> 
                             <br /> 
                                   <br /> 


产品1

Qutantity






产品2

Qutantity






产品3

Qutantity






产品4

Qutantity
演示链接

我添加了
.parent（）。这可以通过使用“最接近”转到公共父div，然后使用“查找”选择正确的控件来轻松完成


 $(document).ready(function () {
     $(".quantity-adder .add-action").click(function () {
         var ctrl = $(this).closest('.quantity-adder').find("[name=quantity]", '.quantity-adder');
         if ($(this).hasClass('add-up')) {
             $(ctrl).val(parseInt($(ctrl).val()) + 1);
         } else {
             if (parseInt($(ctrl).val()) > 1) {
                 $(ctrl).val(parseInt($(ctrl).val()) - 1);
             }
         }
     });

 });




或者，您可以为现代浏览器使用
（无需任何javascript）
工作小提琴链接：

尝试使用
最近的（）
：



//数量文本框查找器
变量数量=功能（el）{
返回$（el）.最近（'div.quantity-adder'）.find（'input[type=text][name=quantity]'））.eq（0）；
};
var plus=函数（e）{
var q=数量（本）；
q、 val（1+（+q.val（）| | 0））；
};
var减号=函数（e）{
var q=数量（本）；
var v=（+q.val（）| | 0）-1；
如果（1>v）
v=1；
q、 val（v）；
};
$（函数（）{
$（'span.fa plus'）。在（'click'，plus'）；
$（'span.fa减号'）。在（'click'，减号'）；
});

。向左拉{
浮动：左；
}
span.fa plus:之后{
内容：“+”；
}
span.fa减：之后{
内容：“-”；
}
span.add-action{
光标：指针；
}



产品1

Qutantity


产品2

Qutantity


产品3

Qutantity


产品4

Qutantity

您需要针对当前项目，而不是所有具有类的项目
我强烈建议您查看类似knockout.js的内容。它将使您的生活方式更加轻松，使用起来更加舒适。@ShailendraSharma我的目标是使用类
数量加法器左拉
的div，只是为了确保它将得到正确的文本以增加。您的演示有一些问题。请再检查一遍。增加1号的数量。然后去第二个。它将失败。请更正它.val（）中的选择器也需要具有正确的数量。现在它接受第一个值（因为jQuery返回一个数组）@Pekka。我认为你应该使用nextest（）直接找到正确的家长（而不是parent（）.parent（）…）@Taleeb这是我想到的第一件事，虽然nextest可以使用
。parent（）
也可以使用，我只是给OP一个选项。我还相信有人用
.nextest（）给出了答案
如果我抄袭他的答案，那将是对他的侮辱，不是吗？

 $(document).ready(function () {
     $(".quantity-adder .add-action").click(function () {
         var ctrl = $(this).closest('.quantity-adder').find("[name=quantity]", '.quantity-adder');
         if ($(this).hasClass('add-up')) {
             $(ctrl).val(parseInt($(ctrl).val()) + 1);
         } else {
             if (parseInt($(ctrl).val()) > 1) {
                 $(ctrl).val(parseInt($(ctrl).val()) - 1);
             }
         }
     });

 });



 $(document).ready( function(){
    $(".quantity-adder .add-action").click( function(){
        var qtyField = $(this).closest('.quantity-adder').find("[name=quantity]");

        if( $(this).hasClass('add-up') ) {  
            qtyField.val( parseInt(qtyField.val()) + 1 );
        }else {
            if( parseInt(qtyField.val())  > 1 ) {
                qtyField.val( parseInt(qtyField.val()) - 1 );
            }
        }
    } );

    });