时间戳

首页 > 解决方案 > jQuery Shopping Cart 当我增加数量时没有任何反应

jquery - jQuery Shopping Cart 当我增加数量时没有任何反应

问题描述

我有 2 个带有增加/减少数量输入的购物车项目并计算小计。

问题是第二项。第一个购物车项目行正常工作，但是当我增加第二个项目的数量时，什么也没发生。我猜它是关于 DOM 的事情，但我想不通。希望各位高手帮帮我

HTML：

<tr class="cart">
                <td class="pt-3">
                  <img class="img-fluid rounded-pill float-left col-md-3 "  src="{{asset('front/')}}/assets/img/1.png"  alt="">
                  <div class="title pb-2">Margarhitta</div>
                  <div class="description" >Lorem ipsum sajdhasdhashd sajdhasdhashd sajdhasdhashd</div>
                
                </td>

                <td  class="text-center"> 

                <span class="price" id="price"><strong>13.99</strong></span>
                
                </td>
                <td  class="text-center">
                  
                  <input class="sub text-right" style="width:20px;" type="button" name="subtract" id="subtract" value="-" ></input>
                  <input type="text" name="qty" id="qty" value="0" class="qty" disabled></input> 
                  <input class="add text-left" style="width: 20px;" type="button" name="add" id="add" value="+"></input>
                  
                </td>
                <td  class="text-center">
                <input type="text" name="subtotal" id="subtotal" value="0" class="subtotal" disabled></input>
                  
                </td>
                <td>
                <a href="javascript:void(0)" class="remove"  ><i class="icofont-trash"></i></a>
                </td>
                
            
            </tr>

            <tr class="cart">
                <td class="pt-3">
                  <img class="img-fluid rounded-pill float-left col-md-3 "  src="{{asset('front/')}}/assets/img/1.png"  alt="">
                  <div class="title pb-2">Margarhitta</div>
                  <div class="description" >Lorem ipsum sajdhasdhashd sajdhasdhashd sajdhasdhashd</div>
                
                </td>

                <td  class="text-center"> 

                <span class="price"><strong>13.99</strong></span>
                
                </td>
                <td  class="text-center">
                  
                  <input class="text-right" style="width:20px;" type="button" name="subtract" id="subtract" value="-" ></input>
                  <input type="text" name="qty" id="qty" value="0" class="qty" disabled></input> 
                  <input class="text-left" style="width: 20px;" type="button" name="add" id="add" value="+"></input>
                  
                </td>
                <td  class="text-center">
                <input type="text" name="subtotal" id="subtotal" value="0" class="subtotal" disabled></input> 
                  
                </td>
                <td>
                <a href="javascript:void(0)" class="remove"  ><i class="icofont-trash"></i></a>
                </td>
                
            
            </tr>

jQuery：

$(function(){
  
    $('.portfolio-item').on('click', '.size-click', function(){
    var id = this.dataset.productId,                
        pitem = $(this).closest('.portfolio-item'); 
        
    $.ajax({
      type: 'GET',
      url: ('/getData'),                        
      data: { id: id },
      success: function (data) {
        console.log(data);
        var p = $('p', pitem)[1];                   

        p.dataset.productId = data.id;              
        p.textContent = data.priceS;                
      }
    })
    });

     $('#dataTablee').DataTable( {
     "paging": false,
     "searching": false
     });  


   $('.portfolio-item').on('click', '.size-clickk', function(){
    var id = this.dataset.productId,                
        pitem = $(this).closest('.portfolio-item'); 
        
    $.ajax({
      type: 'GET',
      url: ('/getData'),                         
      data: { id: id },
      success: function (data) {
        console.log(data);
        var p = $('p', pitem)[1];                  

        p.dataset.productId = data.id;             
        p.textContent = data.price;                
      }
    })
   })

    // Cart Item Remove
    var removeButton = $('.remove')
    removeButton.on('click', function(){
      $(this).closest('tr').remove();
    })


    // Add Item to cart
    
    var cartAddButton = $('.add-to-cart')

    cartAddButton.on('click', function(){
      
    });


    ///// Cart Update Settings

  
    
  
    $('#add').click(function() {
      addQuantity(this);
    });

    $('#subtract').click(function() {
      subQuantity(this);
    });

    function addQuantity(addButton){
      var cartRow = $(addButton).closest('tr');
      var price = parseFloat($('#price', cartRow).text());
      var $quantity = $('#qty',cartRow);
      var current = parseInt($quantity.val());
      var subtotal = $('#subtotal', cartRow);
      
      $quantity.val(current + 1)
      subtotal.val(price*(current + 1))
    } 

    function subQuantity(subButton){
      var cartRow = $(subButton).closest('tr');
      var price = parseFloat($('#price', cartRow).text());
      var $quantity = $('#qty',cartRow);
      var current = parseInt($quantity.val());
      var subtotal = $('#subtotal', cartRow);

      if (current > 0){
        $quantity.val(current - 1)
        subtotal.val(price*(current + 1))
      }else{
        subtotal.val(0);
      }
    } 
  });

标签： jquery

解决方案

您对多个元素使用相同的 id，这就是它仅适用于第一行的原因。而是使用类选择器，然后在您的 jquery 代码中进行相同的更改。

演示代码：

//change to class
$('.add').click(function() {
  addQuantity(this);
});

$('.sub').click(function() {
  subQuantity(this);
});

function addQuantity(addButton) {
  var cartRow = $(addButton).closest('tr');
  var price = parseFloat($('.price', cartRow).text());
  var $quantity = $('.qty', cartRow);
  var current = parseInt($quantity.val());
  var subtotal = $('.subtotal', cartRow);

  $quantity.val(current + 1)
  subtotal.val(price * (current + 1))
}

function subQuantity(subButton) {
  var cartRow = $(subButton).closest('tr');
  var price = parseFloat($('.price', cartRow).text());
  var $quantity = $('.qty', cartRow);
  var current = parseInt($quantity.val());
  var subtotal = $('.subtotal', cartRow);

  if (current > 0) {
    $quantity.val(current - 1)
    subtotal.val(price * (current - 1))
  } else {
    subtotal.val(0);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="cart">
    <td class="pt-3">
      <img class="img-fluid rounded-pill float-left col-md-3 " src="{{asset('front/')}}/assets/img/1.png" alt="">
      <div class="title pb-2">Margarhitta</div>
      <div class="description">Lorem ipsum sajdhasdhashd sajdhasdhashd sajdhasdhashd</div>
    </td>
    <td class="text-center">
      <span class="price"><strong>13.99</strong></span>

    </td>
    <td class="text-center">
  <!--use class-->
      <input class="sub text-right" style="width:20px;" type="button" name="subtract" value="-">
      <input type="text" name="qty" value="0" class="qty" disabled>
      <input class="add text-left" style="width: 20px;" type="button" name="add" value="+">

    </td>
    <td class="text-center">
      <input type="text" name="subtotal" value="0" class="subtotal" disabled>

    </td>
    <td>
      <a href="javascript:void(0)" class="remove"><i class="icofont-trash"></i></a>
    </td>


  </tr>

  <tr class="cart">
    <td class="pt-3">
      <img class="img-fluid rounded-pill float-left col-md-3 " src="{{asset('front/')}}/assets/img/1.png" alt="">
      <div class="title pb-2">Margarhitta</div>
      <div class="description">Lorem ipsum sajdhasdhashd sajdhasdhashd sajdhasdhashd</div>

    </td>

    <td class="text-center">

      <span class="price"><strong>13.99</strong></span>

    </td>
    <td class="text-center">
      <!--use class-->
      <input class="text-right sub" style="width:20px;" type="button" name="subtract" value="-">
      <input type="text" name="qty" value="0" class="qty" disabled>
      <input class="text-left add" style="width: 20px;" type="button" name="add" value="+">

    </td>
    <td class="text-center">
      <input type="text" name="subtotal" value="0" class="subtotal" disabled>

    </td>
    <td>
      <a href="javascript:void(0)" class="remove"><i class="icofont-trash"></i></a>
    </td>


  </tr>
</table>

推荐阅读