ajax不适用于项目列表，但为列表中的第一项工作

Question

我正在处理产品列表，希望在购物车中添加产品。但不幸的是，ajax代码仅适用于列表中的第一项。或者如果我转到页面包含单个产品的详细信息页面，代码将起作用。请告诉我我做错了什么。

$(document).ready(function(){ 
 
     $("#addToCart").click(function(){ 
 
      var productId = $("#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); 
 
       } 
 
      }); 
 
     }); 
 
    });

<div class="icon"> 
 
<input type="hidden" id="productId" value="<?php echo $product->productId; ?>"> 
 
<a href="#" id="addToCart"><span class="glyphicon glyphicon-shopping-cart"></span></a> 
 
<span class="glyphicon glyphicon-copy"></span> 
 
</div>

Answer 1

您使用的id瞄准addToCart按钮，id s只能在页面上的单个元素上使用。在具有多个产品的页面上，这意味着使用addToCartid有多个元素。

将addToCart id更改为一个类，然后适当地更改选择器（即$(.addToCart)）。

Answer 2

您不能拥有多个具有相同ID的元素。在你的情况下，你有相同的ID为addToCart以及productId。

我修改了下面的代码，使其适用于本页面列出的产品数量。它可以通过查找sibling元素是产品ID这样做：

// no-conflict safe "shorthand" document ready 
 
    jQuery(function($) { 
 
     // Access the button by class 
 
     $(".addToCart").click(function() { 
 
      // Find the sibling with the class productId 
 
      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); 
 
       } 
 
      }); 
 
     }); 
 
    });

<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>