ループ内のボタンに同じ機能を使用する方法は？

Question

私はデータベースの製品を表示するホームページを持っており、カートに追加ボタンを追加したので、カートにはそれぞれの特定の製品が追加されます。現在、私は6つの製品をページに表示していますが、明らかに最初の製品のみをカートに追加でき、残りのボタンには機能しないボタンがあります。

研究では、同じIDをJavaScriptで複数回使用することはできません（私はid = "add-to-cart"を使用しています）。これがループ内で起こっているため、最初の項目だけが動作しますボタン。

whileループの各カートに追加するボタンに固有のIDを生成するにはどうすればできますか？また、スクリプトはそれぞれのIDをどのように認識または読み取るのですか？私はJavaScriptの専門家ではありません。ここで

   $result = mysqli_query($bd,$sql2); 

      } 

      if($result){     
      while($row=mysqli_fetch_array($result)){ 
      $prodID = $row["ID"]; 

      $prodname= $row["itemname"]; 
      $prodprice = $row["price"]; 

      ?> 

         <h1 class="product"><?php echo $prodname; ?></h1> 
          <p>Price: <span class="price"><?php echo $prodprice; ?></span></p> 
          <br> 
          <a class="btn btn-default add-to-cart cartButtons" id="add-to-cart" input>Add to Cart</a> 
          <p class="info hidethis" style="color:red;"><strong>Item Added to Cart!</strong></p> 

はスクリプトです：これはにそのクリックイベントを与える

$('.add-to-cart').on('click',function(){ ... }); 

：あなたの例パー

$('#add-to-cart').on('click',function(){ 
    $(this).siblings('.info').fadeIn(700).fadeOut(1000); 
    var price = $(this).siblings('p').children('.price').html(); 
    var product = $(this).siblings('.product').html(); 
    $.post('cart/data.php?q=addtocart', 
      { 
       price:price, 
       product:product, 
       qty:1 
      } 
    ); 
}); 

Answer 1

、次のようにjqueryのクリックを調整した後、あなたのid="add-to-cart"を削除すべてのボタンはクラスadd-to-cartに設定されています。既にクリックイベント機能の内部に$(this)を使用しているので、そのクリックからの詳細を既に取得しています。