javascript - 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);
    });

Answer 1

我可以想到两种选择:

1) 为订单创建另一个字段以打印它们，当用户向其订单中添加内容时您会更新该字段。

2) 在您的产品数组上实现移动到最前面的试探法，以便当产品递增时，它会移动到数组的前面，而最初位于它前面的产品被推回一个空间。例如，如果您以

开头

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

然后用户添加一个梨，然后添加一个苹果，结果将是:

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

当阵列变得庞大时，两者都会出现问题，但如果您不会收到包含数百种独特产品的订单，那应该不是问题。无论您使用哪种方法，您都可以通过使用 $('.order-alert').prepend() 来更新呈现给用户的列表。