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>