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

最新推荐文章于 2023-10-09 17:31:55 发布

chenjieone

最新推荐文章于 2023-10-09 17:31:55 发布

阅读量569

点赞数

分类专栏： jq 文章标签：购物车

本文链接：https://blog.csdn.net/chenjieone/article/details/54604722

版权

jq 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

定义全局变量

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


})