购物车的功能——JS源码

简介: 购物车的功能——JS源码

  此CSS的对应的是“购物车的功能——界面源码”的内容和“购物车的功能——CSS源码”的内容,希望大家不要乱

$(function(){
  //点击复选框全选或全不选效果
    $("#allCheckBox").click(function(){
        var checked=$(this).is(":checked");
        $(".cart_td_1").children().attr("checked",checked);
    });
    //判断是否全选
    function ifAllChecked(){
        var checkedBoxs=$(".cart_td_1").children();
        var sum=checkedBoxs.size();
        var k=0;
        checkedBoxs.each(function(index,dom){
            if($(dom).is(":checked")) k++;
        });
        if(k==sum){
            $("#allCheckBox").attr("checked",true);
        }else{
            $("#allCheckBox").attr("checked",false);
        }
    }
    ifAllChecked();//页面加载完后运行
    //单选判断
    $(".cart_td_1").children().click(function(){
        ifAllChecked();
    });
    
  //计算总价与小计
    function productCount(){
        var $tr=$("#shopping").find("tr[id]");
        var summer=0;
        var integral=0;
        $tr.each(function(i,dom){
            var num=$(dom).children(".cart_td_6").find("input").val();//商品数量
            var price=num*$(dom).children(".cart_td_5").text();//商品小计
            $(dom).children(".cart_td_7").html(price);//显示商品小计
            summer+=price;//总价
            integral+=$(dom).children(".cart_td_4").text()*num;//积分
        });
        $("#total").text(summer);
        $("#integral").text(integral);
    }
    productCount();//页面加载完后运行
  
    //商品增加减少,flag为true时增加,flag为false时减少
    function changeNumber(dom,flag){
        var $input = $(dom).parent().find("input");
        var value = $input.val();
        if(flag){
            value++;
        }else{
            value--;
            if(value<=0){
                value=1;
                alert("宝贝数量必须大于0");
            }
        }
        $input.val(value);
        productCount();
    };
    //点击增加
    $(".cart_td_6").find("img[alt='minus']").click(function(){changeNumber(this,false);});
    //点击减少
    $(".cart_td_6").find("img[alt='add']").click(function(){changeNumber(this,true);});
    
    //点击删除
    $(".cart_td_8").find("a").click(function(){
        $(this).parent().parent().prev().remove();//删除前一tr
        $(this).parent().parent().remove();//删除当前tr
        productCount();
    });
    //点击删除所选
    $("#deleteAll").click(function(){
        $("#shopping").find("tr[id]").each(function(i,e){
            var $tr=$(e);
            var checked=$tr.children(".cart_td_1").children().is(":checked");
            if(checked){
                $tr.prev().remove();
                $tr.remove();
            }
        });
        productCount();
    });
});


目录
相关文章
|
2天前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
12天前
|
监控 安全 NoSQL
采用java+springboot+vue.js+uniapp开发的一整套云MES系统源码 MES制造管理系统源码
MES系统是一套具备实时管理能力,建立一个全面的、集成的、稳定的制造物流质量控制体系;对生产线、工艺、人员、品质、效率等多方位的监控、分析、改进,满足精细化、透明化、自动化、实时化、数据化、一体化管理,实现企业柔性化制造管理。
40 3
|
15天前
|
JavaScript 前端开发 测试技术
编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块,每个模块负责处理特定的功能或任务
【5月更文挑战第10天】编写JavaScript模块化代码最佳实践:使用ES6模块或CommonJS(Node.js),组织逻辑相关模块,避免全局变量,封装细节。利用命名空间和目录结构,借助Webpack处理浏览器环境的模块。编写文档和注释,编写单元测试以确保代码质量。通过这些方法提升代码的可读性和可维护性。
21 3
|
15天前
|
JavaScript 前端开发
JavaScript实现识别二维码信息功能
JavaScript实现识别二维码信息功能
14 1
|
15天前
|
JavaScript
js实现全屏功能——易懂版
js实现全屏功能——易懂版
12 0
|
15天前
|
JavaScript 前端开发 API
如何利用JavaScript和Electron构建具有丰富功能的桌面应用
【4月更文挑战第30天】如何利用JavaScript和Electron构建具有丰富功能的桌面应用
9 0
|
15天前
|
JavaScript 前端开发
实现一个JavaScript动态日期功能
实现一个JavaScript动态日期功能
|
15天前
|
JavaScript 前端开发
JavaScript模糊搜索功能
JavaScript模糊搜索功能
|
15天前
|
JavaScript 前端开发
JavaScript三级联动功能
JavaScript三级联动功能
|
15天前
|
JavaScript
JS实现分页功能
JS实现分页功能