如何使用jquery单独增加或减少一个值答案

【问题标题】：How to individually increase or decrease a value using jquery如何使用jquery单独增加或减少一个值
【发布时间】：2015-09-30 17:30:37
【问题描述】：

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

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

演示链接 https://jsfiddle.net/sjyq64mj/

【问题讨论】：

您需要定位当前项目，而不是所有具有类的项目
<input type='number' />
我强烈建议您查看类似 knockout.js 的内容。这将使您的生活更轻松，工作更舒适。

标签： javascript jquery html

【解决方案1】：

DEMO

 $(document).ready(function () {
     $(".quantity-adder .add-action").click(function () {
         if ($(this).hasClass('add-up')) {
             var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')


             text.val(parseInt(text.val()) + 1);
         } else {
             var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')
             if (parseInt(text.val()) > 1) {


                text.val(parseInt(text.val()) - 1);
             }
         }
     });

 });

我添加了.parent()，以便找到合适的文本来增加

【讨论】：

@ShailendraSharma 我的目标是使用 quantity-adder pull-left 类的 div，以确保它会得到正确的文本来增加
您的演示有问题。请再次检查。增加第 1 次的数量。然后去第二个。它会失败。请改正
.val() 中的 Selector 也需要有正确的数量。现在它取第一个值（因为 jQuery 返回一个数组）
@Pekka。我认为你应该使用最接近（）直接去正确的父母（而不是 parent().parent()...）
@Taleeb 这是我想到的第一件事，尽管可以使用最接近的 .parent() 也可以使用我只是为 OP 提供选项。我也相信有人使用.closest() 给出了答案，如果我复制他的答案，那将是对这个人的侮辱，不是吗？

【解决方案2】：

您需要选择正确的控件并增加/减少值。这可以很容易地通过使用最接近的方式转到公共父 div，然后使用 find 选择正确的控件。

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

 });

jsFiddle

或者，您可以在现代浏览器中使用 <input type='number' min='1' value='1' />（不需要任何 javascript）

【讨论】：

【解决方案3】：

工作小提琴链接：https://jsfiddle.net/sjyq64mj/5/

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

    });

【讨论】：

【解决方案4】：

试试closest():

//quantity text - box finder
var qty = function(el) {
  return $(el).closest('div.quantity-adder').find('input[type=text][name=quantity]').eq(0);
};

var plus = function(e) {
  var q = qty(this);
  q.val(1 + (+q.val() || 0));
};

var minus = function(e) {
  var q = qty(this);
  var v = (+q.val() || 0) - 1;
  if (1 > v)
    v = 1;
  q.val(v);
};

$(function() {
  $('span.fa-plus').on('click', plus);
  $('span.fa-minus').on('click', minus);
});

.pull-left {
  float: left;
}
span.fa-plus:after {
  content: "+";
}
span.fa-minus:after {
  content: "-";
}
span.add-action {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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 />
<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 />
<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 />
<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>

【讨论】：