Блог

Главная - Вопросы по программированию - Корзина покупок jQuery Ничего не происходит, когда я увеличиваю количество

Корзина покупок jQuery Ничего не происходит, когда я увеличиваю количество

#jquery

#jquery

Вопрос:

У меня есть 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);
      }
    } 
  });

Ответ №1:

Вы используете одни и те же идентификаторы для нескольких элементов, поэтому он работает только для первой строки. Вместо этого используйте селектор классов, а затем измените его в своем коде 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>
Метки: