javascript - 如何使用JQUERY增加或减少数量

Question

这个问题已经有答案了:

Increase and decrease values for inputs using jquery (6 个回答)

已关闭 5 年前。

这里我有一个表，在该表中我有一列 quantity 递增作为递减，之后我想取该值，我不知道该怎么做，我尝试了很多时间，但它没有发生，如果任何人都意味着请更新您的代码。我发布了我尝试过的内容，我不知道本节的 increment 和 decrement 部分。

function addToCart(product_id, obj) {
  var qty = $(obj).closest('tr').find('#txtAcrescimo').val();
  console.log(qty);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-xs">
  <tbody>
    <tr>
      <th>Product Name</th>
      <th class="text-right center">Quantity</th>
    </tr>
    <tr class="item-row">
      <td>
        <p>Sandisk</p>
      </td>
      <td class="text-right center" title="Quantity">
        <center>
          <div class="input-group quantity-div">
            <button type="button" class="pls altera"> - </button>&nbsp;
            <input type="text" name="quantity" value="1" class="left-mob" id="txtAcrescimo" style="width: 60px;height: 23px;padding-left: 20px;">&nbsp;<button type="button" class="pls altera acrescimo" onclick="addToCart('12',this)"> + </button>
          </div>
        </center>
      </td>
    </tr>
    <tr class="item-row">
      <td>
        <p>TRANBO </p>
      </td>
      <td class="text-right center" title="Quantity">
        <center>
          <div class="input-group quantity-div">
            <button type="button" class="pls altera"> - </button>&nbsp;
            <input type="text" name="quantity" value="4" class="left-mob" id="txtAcrescimo" style="width: 60px;height: 23px;padding-left: 20px;">&nbsp;<button type="button" class="pls altera acrescimo" onclick="addToCart('16',this)"> + </button>
          </div>
        </center>
      </td>
    </tr>
  </tbody>
</table>

I have tried like this

function addToCart(product_id, obj){
        var qty = $(obj).closest('tr').find('#txtAcrescimo').val();
        console.log(qty);

        var $input = $("#txtAcrescimo");

        // Colocar a 0 ao início
        $input.val(1);
        if ($(this).hasClass('acrescimo'))
            $input.val(parseInt($input.val())+1);
        else if ($input.val()>=1)
            $input.val(parseInt($input.val())-1);

        console.log($("#txtAcrescimo").val());
 }

Answer 1

我已经更改了减号按钮的类别，请尝试此操作。

$(document).ready(function() {
   $('.pls.altera').click(function() {
       var curr_quantity = $(this).prev().val();
       curr_quantity = parseInt(curr_quantity)+1;
       $(this).prev().val(curr_quantity);
       alert('Product Name : '+$(this).parent().parent().parent().prev().text());
   });
   $('.pls.minus').click(function() {
       var curr_quantity = $(this).next().val();
       if(curr_quantity != 0) {
           curr_quantity = parseInt(curr_quantity)-1;
           $(this).next().val(curr_quantity);
           alert('Product Name : '+$(this).parent().parent().parent().prev().text());
       }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-xs">
  <tbody>
    <tr>
      <th>Product Name</th>
      <th class="text-right center">Quantity</th>
    </tr>
    <tr class="item-row">
      <td>
        <p>Sandisk</p>
      </td>
      <td class="text-right center" title="Quantity">
        <center>
          <div class="input-group quantity-div">
            <button type="button" class="pls minus"> - </button>&nbsp;
            <input type="text" name="quantity" value="1" class="left-mob" id="txtAcrescimo" style="width: 60px;height: 23px;padding-left: 20px;">&nbsp;<button type="button" class="pls altera"> + </button>
          </div>
        </center>
      </td>
    </tr>
    <tr class="item-row">
      <td>
        <p>TRANBO </p>
      </td>
      <td class="text-right center" title="Quantity">
        <center>
          <div class="input-group quantity-div">
            <button type="button" class="pls minus"> - </button>&nbsp;
            <input type="text" name="quantity" value="4" class="left-mob" id="txtAcrescimo" style="width: 60px;height: 23px;padding-left: 20px;">&nbsp;<button type="button" class="pls altera"> + </button>
          </div>
        </center>
      </td>
    </tr>
  </tbody>
</table>