购物车点击管理删除和商品价钱的计算

来源：互联网发布：mac版助手官方下载编辑：程序博客网时间：2024/04/28 20:02

定义全局变量

var sum =0;var itemNumber = $(".goods-item").length;//alert(itemNumber);//建立数组存放单价var prices = new Array(itemNumber);for(var i=0;i<itemNumber;i++){    prices[i]=$('.goods-price').eq(i).html();}

点击复选框计算总价：效果如图
这里写图片描述

$('.icon-xuanze1').on('click',function(){    $(this).toggleClass('color');       //alert(allPrice.length)    for(var i=0;i<itemNumber; i++){        //alert(itemNumber)        $('.icon-xuanze1').eq(i).attr("index",i);    }        //alert(allPrice.length)            if($('.icon-xuanze1').eq($(this).attr('index')).hasClass('color')){                sum += parseInt($('.goods-price').eq($(this).attr('index')).html());            }else{                sum -= parseInt($('.goods-price').eq($(this).attr('index')).html());            }    //alert(allPrice);//  var sum = 0;//  for(var i=0; i<allPrice.length;i++){//          sum += parseInt(allPrice[i]);//      }//      //alert(sum);        $('.all-price').html(sum)    })

点击设置动态生成（点击全选框）（删除）（完成）
点击（删除）时。被选中的复选框remove。
总价归零。

$('.icon-shezhi').on('click',function(){    $("<span class='allchooseBox'>").prependTo($(".goods-list"));    $('.allchooseBox').html('<i  class="iconfont icon-xuanze"/>点击全选');    $("<span class='finish'>").insertAfter($(".allchooseBox"));    $('.finish').html('完成');    $("<span class='delete'>").insertAfter($(".finish"));    $('.delete').html('删除');    $('.icon-shezhi').css('display','none');//点击删除，找到选中的，然后删除    $('.delete').click(function(){    var num=0;    for(var i=0;i<$('.icon-xuanze1').length;i++){        if($('.icon-xuanze1').eq(i).hasClass('color')){            num++;            prices.splice(i, 1);//把price数组里面删除的goods-item的价钱删除            //alert(prices);            $('.icon-xuanze1').eq(i).parent().remove();            i--;            itemNumber--;        }//      for(var j=0;j<itemNumber;j++){//          change(j);//      }    }    if(num==0){        alert('至少选一项')    }    if($('.icon-xuanze1').length == 0){        $('.allchooseBox').remove();        $('.delete').remove();        $('.remind').remove();        $('.finish').remove();        $('.foot-top').remove();        alert('你的购物车里什么都没有。还不去逛逛');    }    $('.all-price').html(0);})  //点击全选，子元素全部选中，再点就全取消$('.allchooseBox').on('click',function(){    $('.allchooseBox i').toggleClass('color');    if($('.allchooseBox i').hasClass('color')){        for(var i=0;i<$('.icon-xuanze1').length; i++){            $('.icon-xuanze1').eq(i).addClass('color');        }    }else{        for(var i=0;i<$('.icon-xuanze1').length;i++){            $('.icon-xuanze1').eq(i).removeClass('color');        }    }})//点击完成，设置选项隐藏        $('.finish').click(function(){            $('.allchooseBox').remove();            $('.delete').remove();            $('.finish').remove();            $('.icon-shezhi').css('display','block');            sum =  0;            $('.all-price').html(sum);            for(var i=0; i<$('.icon-xuanze1').length; i++){                $('.icon-xuanze1').eq(i).removeClass('color');            }        })})

这里写图片描述

0 0