Question

我的购物车中的数据来自数据库和while循环中的会话。问题是，当我尝试使用以下代码更新数量时，它会更新所有字段。我想只更新我要增加或减少购物车数量的特定字段。我在这里删除了不必要的字段。

代码：

<?php while ($row = $stmt->fetch()){ extract($row);
<td>
   <div class="input-group mb-3">
      <div class="input-group-prepend">
         <button type="button" class="quantity-left-minus btn btn-danger btn-number"  data-type="minus" data-field=""><i class="fa fa-minus"></i></button>
      </div>
      <input type="text" class="form-control quantity" name="quantity" min="1" max="100" value="1">
      <div class="input-group-append">
        <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus" data-field=""><i class="fa fa-plus"></i></button>
      </div>
   </div>
</td>
<?php } ?>

的jQuery

$(document).ready(function(){
// Increase or Decrease Cart Quantity
  var quantity = 1;
  $('.quantity-right-plus').click(function(e){
    e.preventDefault();
    var quantity = parseInt($('.quantity').val());
    $('.quantity').val(quantity + 1);
  });
  $('.quantity-left-minus').click(function(e){
    e.preventDefault();
    var quantity = parseInt($('.quantity').val());
    if(quantity > 1){
        $('.quantity').val(quantity - 1);
    }
  });
});

Answer 1

您可以在var el = $(this).closest(".input-group").find(".quantity");

之后找到相应的数量输入框

＆＃13;

$(document).ready(function() {
  // Increase or Decrease Cart Quantity
  var quantity = 1;
  $('.quantity-right-plus').click(function(e) {
    e.preventDefault();
    var el = $(this).closest(".input-group").find(".quantity");
    var quantity = parseInt(el.val());
    el.val(quantity + 1);
  });
  $('.quantity-left-minus').click(function(e) {
    e.preventDefault();
    var el = $(this).closest(".input-group").find(".quantity");
    var quantity = parseInt(el.val());
    if (quantity > 1) {
      el.val(quantity - 1);
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus" data-field=""><i class="fa fa-minus"></i></button>
  </div>
  <input type="text" class="form-control quantity" name="quantity" min="1" max="100" value="1">
  <div class="input-group-append">
    <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus" data-field=""><i class="fa fa-plus"></i></button>
  </div>
</div>
</td>

＆＃13;

Answer 2

你需要以root身份使用“this”，这样你才能获得特定的.quantity而不是所有匹配的数组。所以在.click函数中你可以这样做：

$(this).parent().parent().find(".quantity").val(quantity-1)

Answer 3

您需要一个额外的号码：

<?php 
  $num = 1;
  while ($row = $stmt->fetch()){ extract($row);
?>
<td>
   <div class="input-group mb-3">
      <div class="input-group-prepend">
         <button type="button" class="quantity-left-minus btn btn-danger btn-number"  data-type="minus" data-field="" data-target="quantity-<?php echo $num; ?>"><i class="fa fa-minus"></i></button>
      </div>
      <input type="text" class="form-control quantity" name="quantity-<?php echo $num; ?>" min="1" max="100" value="1">
      <div class="input-group-append">
        <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus" data-field="" data-target="quantity-<?php echo $num; ?>"><i class="fa fa-plus"></i></button>
      </div>
   </div>
</td>
<?php
num ++;
 } ?>

在jQuery中：

$(document).ready(function(){
// Increase or Decrease Cart Quantity
  var quantity = 1;
  $('.quantity-right-plus').click(function(e){
    var target = this.data("target");
    e.preventDefault();
    var quantity = parseInt($('input[name="quantity-'+target+'"]').val());
    $('input[name="quantity-'+target+'"]').val(quantity + 1);
  });
  $('.quantity-left-minus').click(function(e){
    var target = this.data("target");
    e.preventDefault();
    var quantity = parseInt($('input[name="quantity-'+target+'"]').val());
    if(quantity > 1){
        $('input[name="quantity-'+target+'"]').val(quantity - 1);
    }
  });
});

使用jQuery仅更新while循环中的选定字段

3 个答案: