Ajax funktioniert nicht für eine Liste von Artikeln, sondern arbeitet für den ersten Artikel der Liste

Question

Ich arbeite mit einer Produktliste, in der ich ein Produkt in den Warenkorb hinzufügen möchte. aber leider funktioniert der Ajax-Code nur für den ersten Eintrag in der Liste. Oder der Code funktioniert, wenn ich auf die Detailseite gehe, auf der die Seite ein einzelnes Produkt enthält. Bitte schlage mir vor, was ich falsch mache.

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

Sie verwenden ein id die addToCart Taste und id s nur auf einer Seite auf einem einzelnen Element verwendet werden kann, zum Ziel. Auf Seiten mit mehreren Produkten bedeutet dies, dass mehrere Elemente verwendet werden, die addToCartid verwenden.

Ändern Sie die addToCart ID in eine Klasse, und ändern Sie die Auswahlelemente entsprechend (z. B. $(.addToCart)).

Answer 2

Sie können nicht mehr als ein Element mit der gleichen ID haben. In Ihrem Fall haben Sie die gleiche ID sowohl für addToCart als auch productId.

Ich habe den folgenden Code so geändert, dass er für so viele Produkte funktioniert, wie auf der Seite aufgelistet sind. Er kann dies tun, indem das sibling Element zu finden, die die Produkt-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>