Question

我有一个显示订单内容的div。目前，我正在使用div

向JQuery添加项目

$(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()

即可更新呈现给用户的列表

JQuery更新div的HTML而不重新加载页面

1 个答案: