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

あなたはaddToCartボタンとid sがページ上の単一の要素のみを使用することができますターゲットにidを使用しています。複数の商品があるページでは、addToCartidを使用する複数の要素があることを意味します。

addToCartのIDをクラスに変更し、セレクタを適切に変更します（つまり、$(.addToCart)）。

Answer 2

同じIDを持つ複数の要素を持つことはできません。あなたの場合、addToCartとproductIdの両方に同じIDがあります。

私は以下のコードを変更して、ページに表示されている数の製品で動作するようにしました。これは、製品IDですsibling要素を見つけることによってこれを行うことができます。

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