加入购物车中添加第一个项目

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只是这些元素的实际选择器的占位符，只是适当地替换它们以选择适当的元素。