加入購物車中添加第一個項目

Question

我有一個簡單的購物車，可以在其中即時添加項目，並且可以通過AJAX更新。 問題是我要從數據庫中拉出我的物品，但是當我單擊“添加到購物車”時，它會填充購物車，但只填充第一個物品，因此無論我單擊哪個物品，它都會添加項目1。

我正在遍歷結果並獲取行：

    while ($row = mysqli_fetch_array($r)) {

    echo '
    <div class="items" id="item">
    <a href="doc_view.php?prod_id='.$row["prod_id"].'"> '.$row["prod_name"]. '</a>';

    echo "
    <div class='product_display'>
    <p><img src='../admin/uploads/".$row['file_upload']."'></p>";    


   echo"
    <input type='button' value='Add To CART' onclick='cart(\"item\");' "; 

    echo'
    <p>Price - '.$row["prod_price"]. '</p>
    <input type="hidden" id="item_name" value="'.$row["prod_name"]. '">
    <input type="hidden" id="item_price" value="'.$row["prod_price"]. '">';?>

    <?php echo'
    </div>
    </div>
    ';


    } 

回聲確實需要清理，但是它們讓我非常困惑！

我使用一點JS來做AJAX：

$(document).ready(function(){

  $.ajax({
    type:'post',
    url:'store_items.php',
    data:{
      total_cart_items:"totalitems"
    },
    success:function(response) {
      document.getElementById("total_items").value=response;
    }
  });

});

而我的JS則完成其余的工作：

    function cart(id)
    {
    var ele=document.getElementById(id);
    var img_src=ele.getElementsByTagName("img")[0].src;
    var name=document.getElementById(id+"_name").value;
    var price=document.getElementById(id+"_price").value;

    $.ajax({
        type:'post',
        url:'store_items.php',
        data:{
          item_src:img_src,
          item_name:name,
          item_price:price
        },
        success:function(response) {
          document.getElementById("total_items").value=response;
        }
      });

    }

    function show_cart()
    {
      $.ajax({
      type:'post',
      url:'store_items.php',
      data:{
        showcart:"cart"
      },
      success:function(response) {
        document.getElementById("mycart").innerHTML=response;
        $("#mycart").slideToggle();
      }
     });

    }

我以為我會分享所有內容，以便您可以看到-但主要的問題是，無論您單擊哪一個，它都只會在列表中添加項目1-我沒有收到任何錯誤，控制台也沒有給我任何幫助？

Answer 1

這是因為您對所有商品都使用了相同的id 。 ID每頁只能使用一次，並且在您多次使用ID的情況下， document.getElementById(id)將僅獲得它找到的第一個，這就是為什么您繼續僅獲得列表中的第一項的原因。

您可以為每個商品指定不同的id ，並將該ID傳遞到cart函數。 為了使事情變得更簡單，請使用事件委托（因為您已經在使用jQuery）來偵聽“添加到購物車”按鈕上的單擊，因此您不必再使用onclick屬性。 您可以這樣做：

$(document).on('click', 'ADDTOCARTBUTTONSELECTOR', function() {
    var element = $(this).closest('.items');
    var image = element.find('img')[0].src;
    var name = element.find('NAMESELECTOR').val();
    var price=document.find('PRICESELECTOR').val();

    // the ajax part follows here
});

ADDTOCARTBUTTONSELECTOR ， NAMESELECTOR和PRICESELECTOR只是這些元素的實際選擇器的占位符，只是適當地替換它們以選擇適當的元素。