将基本 Javascript 购物车扩展为多维

Question

我正在尝试通过扩展这个漂亮的小演示来做一个“快速”的 JavaScript 购物车作为概念证明。 http://www.99points.info/2010/12/ajax-shopping-cart-with-jquery-and-php/

我正在尝试将购物车中物品“类型”的概念扩展到此概念，以便您拥有物品和选项。您可以根据需要添加选项，但只能添加任何项目类型中的 1 个 - 所以我试图将“数组”值转换为多维数组，并真正触及我的 JavaScript 知识墙。

我正在尝试构建的数组应该（我认为）看起来像这样 [itemtype][itemid];

[option][4567]
[item][1234]
[option][9874]
[option][14787]

如果尝试添加另一个“项目”，我希望删除前一个 - 然后可以正常添加新项目。在示例中，此处的 [itemid] 用于遍历 DOM 并获取值重新计算购物车/从 DOM 中删除 ID。

因此，在尝试执行此操作时，我在示例购物车添加/删除 if 调用之前进行 if 检查，以基本上查看数组中是否存在“项目” - 我可以检测到，然后获取 [itemid]已识别，因此我可以将其从数组 [和 DOM] 中删除。

所以基本上我不确定我是否正确推送了这些值（尽管我正在找到它们）并且当我发现我没有得到 itemID 时。

$(document).ready(function() {

// Cart Calculator
var Arrays = new Array();

$("a.cart").click(function(event) {
    event.preventDefault();  
});


$('.cart').click(function(){

    var thisID = $(this).attr('id');

    var itemname  = $(this).find('.name').html();
    var itemprice = $(this).find('.price').html();
    var itemtype = $(this).find('.type').html();  // Added to track item type

    if(include(Arrays,itemtype) && (itemtype == "item")){
        //found an item in the cart
        var whereami = $.inArray(itemtype, Arrays);         
        // alert('Cart has '+itemtype+' in it already ' + whereami);
        alert(cartedItem+' - '+Arrays[whereami]);

    }

    if(include(Arrays,thisID)){

        var price    = $('#each-'+thisID).children(".shopp-price").find('em').html();
        var quantity = $('#each-'+thisID).children(".shopp-quantity").html();
        quantity = parseInt(quantity)+parseInt(1);

        var total = parseInt(itemprice)*parseInt(quantity);

        $('#each-'+thisID).children(".shopp-price").find('em').html(total);
        $('#each-'+thisID).children(".shopp-quantity").html(quantity);

        var prev_charges = $('.cart-total span').html();
        prev_charges = parseInt(prev_charges)-parseInt(price);

        prev_charges = parseInt(prev_charges)+parseInt(total);
        $('.cart-total span').html(prev_charges);

        $('#total-hidden-charges').val(prev_charges);
        $('#total-'+itemtype+'-charges').val(prev_charges);

    }else{

        Arrays.push(thisID,thistype);

        var prev_charges = $('.cart-total span').html();
        prev_charges = parseInt(prev_charges)+parseInt(itemprice);

        $('.cart-total span').html(prev_charges);
        $('#total-hidden-charges').val(prev_charges);
        $('#total-'+itemtype+'-charges').val(prev_charges);

        $('.register .cart-info').append('<div class="shopp" id="each-'+thisID+'"><div class="label">'+itemname+'</div><div class="shopp-price"> $<em>'+itemprice+'</em></div><span class="shopp-quantity">1</span><img src="/Assets/remove.gif" class="remove" Title="Remove from Cart" /><br class="all" /></div>');

    }

    // alert(Arrays.join('\n'));

});     

$('.remove').livequery('click', function() {

    var deduct = $(this).parent().children(".shopp-price").find('em').html();
    var prev_charges = $('.cart-total span').html();

    var thisID = $(this).parent().attr('id').replace('each-','');

    var pos = getpos(Arrays,thisID);
    Arrays.splice(pos,1,"0")

    prev_charges = parseInt(prev_charges)-parseInt(deduct);
    $('.cart-total span').html(prev_charges);
    $('#total-hidden-charges').val(prev_charges);
    $(this).parent().remove();

    isdeath(prev_charges);

}); 

$('#Submit').livequery('click', function() {        
    var totalCharge = $('#total-hidden-charges').val();     
    $('#left_bar').html('Total Charges: $'+totalCharge);        
    return false;       
});         
 });    
});

function include(arr, obj) {
for(var i=0; i<arr.length; i++) {
if (arr[i] == obj) return true;
  }
}
function getpos(arr, obj) {
  for(var i=0; i<arr.length; i++) {
    if (arr[i] == obj) return i;
}
}

屏幕上项目的 HTML 已扩展为包含“类型”类，以便可以引入。

<div class="purchase"><div class="plastic">
<a href="" class="cart" id="10731">
 <span class="name">Box of Goodness</span>$<span class="price">85</span>
 <span class="type">item</span></a></div></div>

Answer 1

我建议您为您的项目创建一个自定义 JavaScript object 并为其提供一个名为 options 的数组属性。

然后您可以将添加或删除项目作为一个整体来处理，而不是使用不稳定的数组方法。

更好的办法是跳过数组，只为所有选项定义属性。

这是一个例子。所以让我们假设你的“物品”是一件衬衫。

var shirt = {};
shirt.type = 27;
shirt.size = "large";
shirt.color = "red";
shirt.options = []


shirt.color = "green";
shirt.options[0] = 45679;

alert(shirt.color);
alert(shirt.options[0]);

如您所见，您可以即时添加属性并进行更改。您甚至可以将属性设置为函数shirt.color = function () {Code here}。

这也是一种方法。除了 JavaScript 之外，还有其他几种处理对象的方法（请参阅上面的链接）。