jQuery购物车完整功能实现，全代码详解（有动态效果图） |
您所在的位置：网站首页 › 淘宝加入购物车显示不全 › jQuery购物车完整功能实现，全代码详解（有动态效果图） |
jQuery购物车完整功能实现，全代码详解（有动态效果图）
|
目录 一、效果展示 ： 二、主要功能介绍： 三、html代码： 四：css代码： 五、核心步骤： 六、jQuery代码（重点） 七、感谢 一、效果展示 ：
1、点击商品数量左右按钮能实现加减商品件数、当前商品后面"小计"(总价)的不断计算并变化 2、可以在"件数"input标签中自定义输入商品件数，并自动计算该商品总价。 3、当商品点击左右按钮加减件数、在输入框中自定义输入件数的时候，能在下方的总计列中显示所有商品的件数、所有商品的价格。 4、点击全选按钮能将所有商品前面的复选框选中，再点击又全不选中。 5、点击每个商品前面的复选框按钮，如果所有商品全部选中，自动将全选按钮赋值为选中状态。 6、在所有商品全部选中状态下，取消一个商品的选中状态，全选按钮自动赋值为不选中状态。 7、点击后面每个商品的"删除"按钮能删除当前商品。 8、商品选中状态下（几个或全选），点击左下方的”删除“按钮能批量删除所选商品。 9、如果当前商品前面的复选框处于选中状态，就给他添加一个类，让他的背景颜色更加突出；如果变为非选中状态，删除他刚添加的类，让其恢复到原有的背景色。 10、在商品增加、删除、修改时都能自动的在最下方列总计的 总件数 和 总价 修改 三、html代码：这一部分不是重点，重点是学习jQuery，所以不太讲究过于精美，望各位不要介意~ 这一部分，注意关注结构和类名，以便于后面的学习！ 首页 服装 手机 电脑 日用 注册 登录 全选 商品 价格 数量 小计 操作
月亮与六便士正版书籍 毛姆经典作品青少 世界经典文学名著书籍畅销书排行榜 ￥12.60 - + ￥12.60 删除
月亮与六便士正版书籍 毛姆经典作品青少 世界经典文学名著书籍畅销书排行榜 ￥25.80 - + ￥25.80 删除
月亮与六便士正版书籍 毛姆经典作品青少 世界经典文学名著书籍畅销书排行榜 ￥32.10 - + ￥32.10 删除
月亮与六便士正版书籍 毛姆经典作品青少 世界经典文学名著书籍畅销书排行榜 ￥22.40 - + ￥22.40 删除 全选 总计 1 ￥14.30 删除 四：css代码：这一部分不是重点，自己练习写就可以~ * { margin: 0; padding: 0; } /* nav */ input { outline: none; } nav { width: 1070px; height: 80px; background-color: #e9e6b8; margin-bottom: 20px; line-height: 80px; padding: 0 40px; } nav ul { width: 1100px; } nav ul li { float: left; list-style: none; width: 170px; height: 60px; font-size: 20px; } nav ul li:nth-child(6) { margin-left: 60px; } nav ul li:nth-child(6), nav ul li:nth-child(7) { width: 60px; font-size: 16px; } .current { background-color: #e0dfd7; } /* 购物车主体 */ div { box-sizing: border-box; } .cart-head { width: 1070px; height: 50px; background-color: #eeeddd; padding-top: 15px; padding-left: 10px; } .cart-head div, .cart-head input { float: left; } .cart-head input[type=checkbox] { margin-right: 3px; } .commodity { margin-left: 100px; } .price { margin-left: 300px; } .num, .sum, .operation { margin-left: 100px; } /* 商品内容模块 */ .cart-content { margin-top: 10px; } .cart-content .item { width: 1070px; height: 200px; border-top: 1px solid #ccc; margin-bottom: 10px; padding-left: 10px; } .item .box { float: left; width: 300px; height: 100px; margin-left: 50px; margin-top: 50px; } .cart-content .item input { display: block; float: left; margin-top: 90px; background-color: #ccc; } .item .box img { width: 145px; float: left; margin-right: 5px; } .item .box p { text-indent: 2em; width: 145px; float: left; font-size: 12px; } .item>div { float: left; margin-top: 100px; } .item-price { margin-left: 107px; } .item-num { margin-left: 70px; } .item-sum { margin-left: 72px; } .item-opration { margin-left: 90px; } .item-num span { display: block; width: 15px; height: 20px; float: left; border: 1px solid #ccc; margin-top: 0px; text-align: center; line-height: 17px; } .item .item-num .nums { float: left; width: 35px; height: 20px; border: 1px solid #ccc; text-align: center; font-size: 12px; line-height: 20px; margin-top: 0; } /* 总计 */ .cart-footer { width: 1070px; height: 100px; background-color: #eeeddd; line-height: 90px; padding-left: 10px; } .cart-footer .select-all input { vertical-align: middle; margin-top: -2px; } .cart-footer .select-all span { vertical-align: middle; display: inline-block; } .cart-footer>div { float: left; line-height: 100px; } .footer-total { margin-left: 435px; } .footer-price { margin-left: 70px; } .footer-num { margin-left: 105px; } .footer-sum { margin-left: 95px; } .footer-opration { margin-left: 95px; } .w { width: 1070px!important; } 五、核心步骤：在看jquery代码的前面或过程中可以看一下步骤的分析，对代码的理解特别有帮助！
我写的注释特别详细，特别多，在这我也就不啰嗦了，大伙有我写的不清楚的或不太完美的，希望各位多多指教~ $(function() { // 给nav导航栏中的li添加悬浮变字体颜色的效果（完全可以不用做） $("nav li").stop().mouseenter(function() { $(this).css('color', 'red'); }).stop().mouseleave(function() { $(this).css('color', '#000'); }) getPriceSum(); // 让全选按钮的checked属性的状态和所有item的复选框状态一致 // checked属性改变之后触发 $(".select-all input").change(function() { // 获取它的状态，给所有的item里面的复选框赋值 var check = $(this).prop('checked'); // 让每个小项目和全选按钮同时改变值,否则点击最上面全选按钮，最下面全选按钮选不上 $(".item input,.select-all input").prop('checked', check); // 当全选按钮发生改变，如果是选中状态给所有的item加current类 if (check) { $('.item').addClass('current'); } else { $('.item').removeClass('current'); } }); // 点击下面每个项目中的复选框，如果复选框都选上了，让上面下面的全选按钮也选上； // 如果没都选上，就让全选按钮处于没选中状态。 $(".item input").change(function() { // 如果所有item中复选框被选中的数目等于总数，就让让全选按钮也选上 // $(".item input:checked")：被选中的个数，但他是以伪元素形式输出，再加上.length即可 if ($(".item input:checked").length == $(".item").length) { $(".select-all input").prop('checked', true); } else if ($(".item input:checked").length < $(".item").length) { $(".select-all input").prop('checked', false); } // 当点击每个item前面的复选框按钮时，如果是选中状态就添加current类 var check = $(this).prop('checked'); if (check) { $(this).parents('.item').addClass('current'); } else { $(this).parents('.item').removeClass('current'); } }); // 增加商品数量模块，点击加号时，让当前商品数量++ $(".item .right").click(function() { var num = $(this).siblings('.nums').val(); num++; $(this).siblings('.nums').val(num); // 点击右侧按钮时候，当前的商品后面的小计也要做相应的改变 // 把价格中的数字截取出来*数目，再赋值给小计，赋值时+"￥"。 var price = $(this).parents('.item-num').siblings('.item-price').text().substr(1); // 计算结果，保留两位小数 var sum = (price * num).toFixed(2); // 给他爹的兄弟赋值 $(this).parents('.item-num').siblings('.item-sum').text("￥" + sum); getsum(); getPriceSum(); }); // 减少商品，当点击左按钮时，先获取再--，最后赋值；到了1就不能再减了。 $(".item .left").click(function() { var num = $(this).siblings('.nums').val(); if (num |
【本文地址】
今日新闻 |
推荐新闻 |