jQuery ajax 问题

Question

我已经研究这段代码一段时间了，但不确定我做错了什么。基本上我想创建一个循环来打印购物车中的所有商品。如果我取出循环，它会打印刚刚添加的项目，但是当我添加循环时，它会中断。

我对 jQuery/JSAON 不太熟悉，所以如果有人能指出我可能出错的地方，那就太好了。

（编辑-完整的js文件）

var ShoppCartAjaxHandler = function (cart) {
    (function($) {
        var display = $('#shopp-cart-ajax');
        display.empty().hide(); // clear any previous additions
        var item = $('<ul class="sidecart_list"></ul>').appendTo(display);
        $.each(cart.items, function() {
            $("<li></li>").html("<strong>"+this.quantity+"</strong>"+this.name).appendTo(item);
        });
        //$('<li></li>').html('<strong>'+cart.Item.quantity+'</strong> x '+cart.Item.name).appendTo(item);
        $('<li></li>').html('<strong>Subotal</strong> '+asMoney(cart.Totals.subtotal)).appendTo(item);
        $('<li></li>').html('<strong>Shipping</strong> '+asMoney(cart.Totals.shipping)).appendTo(item);
        $('<li></li>').html('<strong>Total</strong> '+asMoney(cart.Totals.total)).appendTo(item);
        if ($('#shopp-cart-items').length > 0) {
            $('#shopp-cart-items').html(cart.Totals.quantity);
            $('#shopp-cart-total').html(asMoney(cart.Totals.total));            
        } else {

            $('.widget_shoppcartwidget p.status').html('<p class="status_info"><strong><span id="shopp-cart-items">'+cart.Totals.quantity+'</span></strong> x <span id="shopp-cart-total">'+cart.Item.name+'</span></p><p class="status_info"><strong>Subtotal</strong> <span id="shopp-cart-subtotal">'+asMoney(cart.Totals.subtotal)+'</span></p><p class="status_info"><strong>Shipping</strong> <span id="shopp-cart-shipping">'+asMoney(cart.Totals.shipping)+'</span></p><p class="status_info"><strong>Total</strong> <span id="shopp-cart-total">'+asMoney(cart.Totals.total)+'</span></p>');

        }
        display.slideDown();
    })(jQuery)  
}

Answer 1

请将您的呼叫更改为 $.each，如下所示：

$.each(
  cart.items,
  function() {
    $("<li></li>").html("<strong>" + this.Quantity + "</strong>" +
      this.name).appendTo(item);
  }
);

Answer 2

以下应该有效。查看每个项是如何调用的，“this”指的是正在迭代的项目。我还更改了变量“ul”来表示列表，以便更清楚发生了什么。最后，确保您的购物车如下所示：

var cart = { 
    items: [
        {quantity: 1, name: 'asjdfkj' },
        {quantity: 1, name: 'asjdfkj' },
        {quantity: 1, name: 'bkag' }
            ],
    Totals: { 
        subtotal: 12.95, 
        shipping: 2.34, 
        total: 15.00
    }

};

var asMoney=function(s) { return s; }


    var display = $('#shopp-cart-ajax');
    display.empty(); // clear any previous additions
    var ul = $('<ul class="sidecart_list"></ul>').appendTo(display);

    $.each(cart.items, function() {
      $('<li></li>').html('<strong>'+this.quantity+'</strong> x '+this.name).appendTo(ul);
    });
 $('<li></li>').html('<strong>Subotal</strong>'+asMoney(cart.Totals.subtotal)).appendTo(ul);
 $('<li></li>').html('<strong>Shipping</strong>'+asMoney(cart.Totals.shipping)).appendTo(ul);
    $('<li></li>').html('<strong>Total</strong> '+asMoney(cart.Totals.total)).appendTo(ul);

Answer 3

看来这一行是您的问题：

var item = $('<ul class="sidecart_list"></ul>').appendTo(display);

您正在将所有项目附加到最初附加到显示的对象。最好将所有后续项目直接附加到显示中，或者在填充项目对象后将其附加到显示中。