Question

有人可以告诉我为什么我的Jquery循环（使用每个）显示所有过去的添加内容吗？例如，如果我添加第4项并添加第1,2,3项，它将显示1,2,3,1,2,3,4 ....任何想法？

  function refreshCart(){
    console.log("in current cart")
    var cartTable = $(".cart-table")
    var cartBody = cartTable.find(".cart-body")
    var productRows = cartBody.find(".cart-product")
    var currentUrl = window.location.href

    var refreshCartUrl = '/api/cart/'
    var refreshCartMethod = "GET";
    var data = {};
    $.ajax ({

      url: refreshCartUrl,
      method: refreshCartMethod,
      data: data,
      success: function(data) {
        console.log("success")
        console.log(data)
        if (data.products.length > 1) {
          productRows.html("")

          $.each(data.products, function(index, value) {
            cartBody.append("<tr><th scope=\"row\">" + index + "</th><td colspan=3>" + value + "</td></tr>")
          })
        } else {
          window.location.href = currentUrl
        } 
    },
      error: function(errorData) {
        console.log("error")
        console.log(errorData)
      }
    })
}

Answer 1

问题是当你第二次刷新购物车时，你的dom元素没有被清空。所以循环本身没什么问题，你只需要先清空dom元素。像这样：

$(cartBody).empty()

刚拿到cartBody之后就这样做了，你应该全力以赴！：）

Answer 2

您使用productRows.html（＆＃34;＆＃34;）行删除购物车产品的内容，但您将内容附加到购物车主体，而不删除之前的内容。这就是为什么它会将相同的数据追加两次。在循环之前删除cart-body内容。

Answer 3

我认为您需要进行一些更改，请参阅以下内容：

success: function(data) {
console.log("success")
console.log(data)
if (data.products.length > 1) {

  var allProduct = '';

  $.each(data.products, function(index, value) {
    allProduct += "<tr><th scope=\"row\">" + index + "</th><td colspan=3>" + value + "</td></tr>";
  })

  $(cartBody).html(allProduct); // Replacing your existing html here

} else {
  window.location.href = currentUrl
} 
}

每个循环的Jquery显示已添加的项

3 个答案: