javascript - 添加到购物车添加第一项

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>
    ';


    } 

echo 确实需要清理，但它们让我很困惑!

我正在使用一些 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，如果您多次使用它，document.getElementById(id) 只会获取它找到的第一个 ID，这就是为什么您要不断获取仅列表中的第一项。

您可以为每个项目指定不同的 id 并将该 id 传递给 cart 函数。或者为了使事情更简单，使用事件委托(delegate)(因为您已经在使用 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
});

ADTDTOCARTBUTTONSELECTOR、NAMESELECTOR 和 PRICESELECTOR 只是这些元素的实际选择器的占位符，只需适本地替换它们即可选择适当的元素。