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

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 后执行此操作，您就应该准备就绪! :)