javascript - 商品已放入购物车，但我想在我单击的框中显示确认文本

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 都会收到相同的消息。相反，在选择器的上下文中获取 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.
        }
    });
});