Question

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

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

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

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

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

所以在我尝试这样做的时候，我在做示例购物车添加/删除之前进行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（参见上面的链接）。

扩展基本Javascript购物车是多维的

1 个答案: