++ & -- 将 jquery 用于购物车产品数量的相同提交按钮的问题 (Php)

Question

我在使用购物车产品 ++ 和 - 使用 jquery 和表单提交按钮时遇到了一些问题点击按钮但只有第一个购物车产品正常工作而另一个不工作因为 Id 问题请参考我的代码如下：$(document).ready(function() {  $('.plus').click(function() {    var num = parseInt($('#quantity').val());    if (num == 10) {      num = 10;    } else {      num++;    }    $('#quantity').val(num);  });  $('.minus').click(function() {    var num = parseInt($('#quantity').val());    if (num == 1) {      num = 1;    } else {      num--;    }    $('#quantity').val(num);  });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><form method='post' action=''>  <input type='hidden' name='code' value="1234" />  <input type='hidden' name='action' value="change" />  <div class="qty input-group pb-1">    <span class="input-group-btn">    <button class="btn btn-theme-round btn-number minus" type="button">-</button>  </span>    <input type="text" value="0" name="quantity" id="quantity_1234" class="quantity">    <span class="input-group-btn">      <button class="btn btn-theme-round btn-number plus" type="button">+</button>    </span>  </div></form><form method='post' action=''>  <input type='hidden' name='code' value="5678" />  <input type='hidden' name='action' value="change" />  <div class="qty input-group pb-1">    <span class="input-group-btn">    <button class="btn btn-theme-round btn-number minus" type="button">-</button>  </span>    <input type="text" value="0" name="quantity" id="quantity_5678" class="quantity">    <span class="input-group-btn">      <button class="btn btn-theme-round btn-number plus" type="button">+</button>    </span>  </div></form>

Answer 1

您对 ID 和 Class 有疑问

如果你想在他们点击时提交，你需要这样做：

请注意，我删除了加号/减号按钮上的所有内容并将 ID 移至班级

$(function() {

  $('.btn-number').click(function() {

    const $form = $(this).closest("form");

    var num = +$('.quantity',$form).val();

    num += $(this).hasClass("plus") ? 1 : -1; // which button?

    if (num >= 10) {

      num = 10;

    } else if (num <= 0) {

      num = 0;

    }

    $('.quantity',$form).val(num);

    // $form.submit(); // uncomment to submit

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<form method='post' action=''>

  <input type='hidden' name='code' value="1234" />

  <input type='hidden' name='action' value="change" />

  <div class="qty input-group pb-1">

    <span class="input-group-btn">

    <button class="btn btn-theme-round btn-number minus" type="button">-</button>

  </span>

    <input type="text" value="0" name="quantity" id="quantity_1234" class="quantity">

    <span class="input-group-btn">

      <button class="btn btn-theme-round btn-number plus" type="button">+</button>

    </span>

  </div>

</form>

<form method='post' action=''>

  <input type='hidden' name='code' value="5678" />

  <input type='hidden' name='action' value="change" />

  <div class="qty input-group pb-1">

    <span class="input-group-btn">

    <button class="btn btn-theme-round btn-number minus" type="button">-</button>

  </span>

    <input type="text" value="0" name="quantity" id="quantity_5678" class="quantity">

    <span class="input-group-btn">

      <button class="btn btn-theme-round btn-number plus" type="button">+</button>

    </span>

  </div>

</form>