如何獲取每個不同的值形式破壞與Ajax循環？

Question

我有收集頁面上的循環產品，我想用jQuery和ajax獲取每個產品的價值，但是我有代碼，只有當我們點擊任何產品的加入購物車按鈕時纔會獲得第一個產品價值，僅顯示第一個產品，下面是我的代碼：

function addItem(form_id) { 
    var postData = $('#'+form_id).serialize(); 
    alert(postData); 
    $.ajax({ 
    type: 'POST', 
    url: '/cart/add.js', 
    dataType: 'json', 
    data: $('#'+form_id).serialize(), 
    success: addToCartOk, 
    error: addToCartFail 
}); 

}

這裏我檢查：https://soft-theme.myshopify.com/collections/all其有史以來哪個按鈕，我點擊

任何人都可以幫助我在此，請只得到的id = 27733468427？

Answer 1

您有幾個表單具有相同的ID。這在HTML DOM中是不允許的：每個id="..."屬性應該是唯一的，不能使用幾個相同形式的id="add-to-cart"。當瀏覽器遇到多個具有相同id的對象時，它會忽略此id的其他對象，因爲id應該是唯一的。

您可以改爲使用class="add-to-cart"。

（此外，刪除您添加按鈕id="add"，它也是一個重複id，你可以使用類代替。）

而且，你並不真的需要在你的代碼通過一個ID。你可以使用this來獲取包含元素的表單，它指向點擊的按鈕（但是，它需要用$來將DOM對象轉換爲jQuery對象）：

所以，你可以使用這個您的表單：

<form method="post" action="/cart/add" class="add-to-cart"> 
    <input type="text" name="id" value="27733468427" class="ppp" /> 
    <input type="submit" name="add" 
     value="Add to Cart" 
     onclick="addItem(this); return false;"/> 
</form> 

這是對<input type="submit" ... />元素的引用。所以，你可以通過使用.closest，這樣得到的形式包裝該元素：

function addItem(button) { 
    var $button = $(button); 
    var $form = $button.closest('form'); 
    var postData = $form.serialize(); 
    alert(postData); 
    $.ajax({ 
    type: 'POST', 
    url: '/cart/add.js', 
    dataType: 'json', 
    data: $form.serialize(), 
    success: addToCartOk, 
    error: addToCartFail 
}); 

這不是做事的推薦方式，雖然。 onclick="..."是一種不推薦的做事方式，因爲您正在將JavaScript與HTML混合使用。相反，建議全部刪除onclick="..."，並在<script>代碼中綁定事件回調。要做到這一點，只是刪除onclick在你的形式：

<form method="post" action="/cart/add" class="add-to-cart"> 
    <input type="text" name="id" value="27733468427" class="ppp" /> 
    <input type="submit" name="add" 
     value="Add to Cart"/> 
</form> 

並且採用階級add-to-cart結合的方法（確保你做了它的進級，否則我的代碼將無法正常工作）：

$(function() { 
    $("form.add-to-cart").submit(function() { 
    var $form = $(this); 
    var postData = $form.serialize(); 
    alert(postData); 
    $.ajax({ 
     type: 'POST', 
     url: '/cart/add.js', 
     dataType: 'json', 
     data: $form.serialize(), 
     success: addToCartOk, 
     error: addToCartFail 
    }); 
    return false; 
}); 

上面的代碼執行以下操作：

• 周圍的代碼$(function() { ... });確保，當所有的元素加載的代碼只運行。
• 找到所有格式class="add-to-cart"
• $("form.add-to-cart").submit(function() { ... });增加了一個回調函數。每次帶有class="add-to-cart"的任何表格都會被調用。

這是推薦替代onclick。

更新：我的代碼的第一個版本有一個bug：因爲$("form.add-to-cart").submit連接到形式，而不是按鈕，我們應該用$(this)來指形式。我們在代碼的第二個版本中不需要closest。

Answer 2

https://api.jquery.com/each/

你想使用jquery的每個屬性。我希望這能幫到您。