вещь отправляется в корзину, но я хочу показать текст подтверждения в поле, на которое я нажал

Question

У меня есть список предметов. Список предметов поступает из базы данных.

Что я сделал: - Когда я нажимаю на кнопку «Добавить в корзину» из списка предметов, она отлично работает, товар отправляется в корзину.

Что я хочу: - Я хочу показать текст подтверждения в поле, на которое я нажал. Теперь результат отображается во всех div.

Вот мой код:

<div class="col-md-6"> 
<div class=" product-list clearfix" style="float:left"> 
    <?php foreach ($product as $key => $product) { ?> 
    <div class="product clearfix"> 
    <figure> 
     <a href="<?php echo base_url(); ?>index/productDetails/<?php echo $product->productId; ?>"> 
     <img src="<?php echo $product->productImage; ?>" alt="" height="100%"> 
     </a> 
     </figure> 
     <div class="detail"> 
      <h4><a href="<?php echo base_url(); ?>index/productDetails/<?php echo $product->productId; ?>"> 
      <?php echo $product->productName; ?> 
      </a></h4> 
      <?php 
      $this->load->helper('text'); 
      $string = $product->productDescription; 
      echo $string = word_limiter($string, 10); 
      ?> 
     </div> 
     <div class="proPrice"> 
      <?php echo $product->productPrice; ?>/= 
      <div class="icon"> 
       <input type="hidden" class="productId" value="<?php echo $product->productId; ?>"> 
       <a href="#" class="addToCart"><span class="glyphicon glyphicon-shopping-cart"></span></a> 
       <span class="glyphicon glyphicon-copy"></span> 
      </div> 
     </div> 
     <div class="result2"></div> 
    </div> 
    <?php $i++; } ?> 
    <p><?php echo $links; ?></p> 
</div> 

$(document).ready(function(){ 
    $(".addToCart").click(function(){ 
     var productId = $(this).siblings(".productId").val(); 

     $.ajax({ 
      url:'<?php echo site_url('cart/addToCart/'); ?>', 
      data:{productId:productId}, 
      type:'POST', 
      success:function(data){ 
       // Change css value of "result" div and Display 
       $(".result2").css("display", "block"); 
       $(".result2").html(data); 
      } 
     }); 
    }); 
}); 

Answer 1

Как селектор класса возвращает коллекцию, так что все дивы получает такое же сообщение. Вместо этого получите div в контексте вашего селектора, например:

$(".addToCart").click(function(){ 
    var productId = $(this).siblings(".productId").val(); 
    var $resltDiv = $(this).closest('.proPrice').next('.result2'); // get the div here 
    $.ajax({ 
     url:'<?php echo site_url('cart/addToCart/'); ?>', 
     data:{productId:productId}, 
     type:'POST', 
     success:function(data){ 
      // Change css value of "result" div and Display 
      $resltDiv.html(data).show(); // put the data and show it here. 
     } 
    }); 
});