使用JQuery更新div的HTML内容而不重新加载页面

Question

我有一个 div，用来显示订单的内容。目前我是使用 JQuery 来实现向这个 div 添加物品的：

$(document).ready(function(){
    //if cookie exists, show the panel
    if($.cookie('order_cookie') != undefined){

    productArray = JSON.parse($.cookie('order_cookie'));

    $(".order-alert").show();

    for(var i = 0; i < productArray.length; i++){
       console.log(productArray[i]);
       var obj = productArray[i];
       $(".order-alert").append("<p> StockCode: " + obj.stockCode + " Qty: " + obj.quantity + "</p>");
       console.log("Object code: " + obj.stockCode + " Qty: " + obj.quantity);

    }

    $('#order_counter').html(productArray.length);
    }
});

我已经让它工作了，当用户添加订单时，计数器会在不重新加载浏览器窗口的情况下增加。

    $('#order_counter').html(productArray.length);

我想知道如何使用我的loop实现与用户添加到array相同顺序的项目输出。

非常感谢任何帮助。

此脚本将项目添加到array中，同时在脚本中设置了cookie。

var productArray = []; // Will hold order Items

$(".orderBtn").click(function(event){
        //Check to ensure quantity > 0
        if(quantity == 0){
            console.log("Quantity must be greater than 0")
        }else{//It is so continue
            //Show the order Box
            $(".order-alert").show();
            event.preventDefault();

            //Get reference to the product clicked
            var stockCode = $(this).closest('li').find('.stock_code').html();
            //Get reference to the quantity selected
            var quantity = $(this).closest('li').find('.order_amount').val();

            //Order Item (contains stockCode and Quantity) - Can add whatever data I like here
            var orderItem = {
            'stockCode' : stockCode,
            'quantity'  : quantity
            };

            //Check if cookie exists 
            if($.cookie('order_cookie') === undefined){
            console.log("Creating new cookie");
            //Add object to the Array
            productArray.push(orderItem);
            }else{//Already exists
            console.log("Updating the cookie")
            productArray = JSON.parse($.cookie('order_cookie'));
            //Check if the item already exists in the Cookie and update qty

            var found = false;

            for(var i =0; i < productArray.length; i++){
                 if(productArray[i].stockCode == stockCode){
                 console.log("OBJECT EXISTS")
                 var index = i;
                 found = true;
                }
                }
                //If it exists update the old quantity
                if(found){
                //update
                console.log("Match found at: "  + index);
                var oldQty = (productArray[index].quantity)
                var newQty = parseInt(quantity) + parseInt(oldQty);
                productArray[index].quantity = newQty;

                }else{// It doesn't exist so add new item to array
                productArray.push(orderItem);
                }
            }
        }

        //Update the Cookie
        $.cookie('order_cookie', JSON.stringify(productArray), { expires: 1, path: '/' });

        //Testing output of Cookie
        console.log($.cookie('order_cookie'));
        //Update the order tracker
        $('#order_counter').html(productArray.length);
    });

- Javacadabra

---

项目是如何添加到数组中的？是什么设置了Cookie？ - Jay Blanchard

类似这样的代码：function addToMyOrder(obj) { $(.order-alert).append(... obj ); addToMyCookie(obj); }？ 如果您想使用循环，您应该重新加载所有订单。 - Tony

Answer 1

我能想到两个选项：

1）创建另一个字段来记录订单中的打印顺序，当用户添加某些内容到他们的订单时更新该字段。

2）在产品数组上实现“移动到前面”的启发式算法，这样当增加一个产品时，它会被移动到数组的前面，并且原本在前面的产品会向后推一个位置。例如，如果你从以下情况开始：

"orange" => 1
"pear"   => 1

然后用户先加了一个梨，再加了一个苹果，结果会是：

"apple"  => 1
"pear"   => 2
"orange" => 1 

当数组变得庞大时，两种方法都会出现问题，但是如果你不会收到包含数百个独特产品的订单，这就不是一个问题。 无论你使用哪种方法，你都可以通过只使用$('.order-alert').prepend()来更新向用户展示的列表。

- Shmoopy