jQuery实现购物车功能的案例

2024-06-18 23:55| 来源: 网络整理| 查看: 265

用jquery写了一个购物车的案例

功能如下

1,全选按钮和单个复选框的功能 2,商品数量的加减 3,单个商品总价随着商品数量的增减变化 4,实现了商品总数的变化 5,实现所有商品价钱之和随着商品的件数变化而变化 6,添加了单个商品删除功能 7,添加了清空购物车功能

下面是代码展示

全选单价数量/(多少) 合计操作生菜 ¥12.60 - + ¥12.60 删除白菜 ¥8.00 - + ¥8.00 删除花菜 ¥8.60 - + ¥8.60 删除青菜 ¥12.50 - + ¥12.50 删除清空商品你买了件商品,一共是: 元结算

jQuery代码

$(function() { // 1.全选按功能模块 $('.allkinds').change(function() { $('.kinds').prop('checked', $(this).prop('checked')) }) $('.kinds').change(function() { // 用:checked选择器直接查找被选中的元素 //如果被选中的复选框的个数等于所有复选框的个数,那就把全选给选上 if ($('.kinds:checked').length === $('.kinds').length) { $('.allkinds').prop('checked', true) } else { $('.allkinds').prop('checked', false) } }) //2.数量的加减模块 // 加模块 $('.right').click(function() { // 点击得到当前文本框的值, var i = $(this).siblings('.num').val(); i++; //每次点击都加1,然后把值放进文本框中 $(this).siblings('.num').val(i); //合计加模块 var p = $(this).parent().siblings('.price').text() //截取从第二位开始 p = p.substr(1); // toFixed()方法保留几位小数,这里我需要计算后保留小数后两位 var sum = (p * i).toFixed(2); $(this).parent('.we').siblings('.priceall').text("¥" + sum) sumall(); }) // 减模块 $('.left').click(function() { // 点击得到当前文本框的值, var i = $(this).siblings('.num').val(); //这里做一个判断.如果数量小于1,那就不执行自减; if ($(this).siblings('.num').val() > 1) { i--; } else { return false; } //每次点击都减1,然后把值放进文本框中 $(this).siblings('.num').val(i); //合计减模块 //p是单价 var p = $(this).parent().siblings('.price').text() p = p.substr(1); var sum = (p * i).toFixed(2); $(this).parent('.we').siblings('.priceall').text("¥" + sum) // console.log(i, p); sumall(); }) //3 当我文本框的值发生变化,总价也要发生变化 $('.num').change(function() { //n是文本框修改后的值 var n = $(this).val(); // p是单价 var p = $(this).parent().siblings('.price').text() p = p.substr(1); var sum = (p * n).toFixed(2); $(this).parent('.we').siblings('.priceall').text("¥" + sum) sumall(); }) //先调用一下,页面初始状态就可以获取到商品总数和花费总数 sumall() //商品总数和花费总数 //求和 function sumall() { //总件数 var count = 0; //总花费 var money = 0; //遍历文本框的值,然后相加 $.each($('.num'), function(i, ele) { count += parseInt($(ele).val()); }) $('.foot>h6').text(count) //花费 $.each($('.priceall'), function(i, ele) { money += parseFloat($(ele).text().substr(1)); }) $('.foot>h5').text("¥" + money.toFixed(2)) } // 想求得商品总数,就要遍历文本框的值 $.each()方法可以进行遍历 //删除商品模块 //单个删除 $('.delete').click(function() { $(this).parent('.one').remove() sumall(); }) //一起删除 $('.over').click(function() { $(this).parents().siblings('.one').remove() sumall(); }) })

基本的购物车功能都已经实现了的.样式写的不太好希望大家理解写的不是很好希望大家多多鼓励,有什么意见可以联系交流一下,我正在学.

成果图展示样式没有写的太多,主要是实现的功能在这里插入图片描述希望有个大佬可以带我学,这样效率会比较高

【本文地址】

公司简介

联系我们