近一直忙于公司的一个新的h5项目，项目中有一个购物车模块，使用jquery实现购物车基本结算功能。现已整理出来，感兴趣的小伙伴们可以参考一下。

基本实现了单选、全选、购物车数量联动、价格动态汇总、删除订单及无数据提示。

购物车列表模板

实际项目中需要根据购物车商品数据动态渲染，这里就使用静态html展示了。

<!-- 购物车列表 -->
<div class="cart-wrap__ls" id="J__CartLS">
	<div class="cart-ls__item">
		<!-- //复选框 -->
		<div class="cart-item__radio"><i class="ico-radio"></i></div>
		<!-- //商品信息 -->
		<div class="cart-item__ginfo">
			<img class="g-img" src="http://admin.weikeniu.com/img/28291/20170721151143_4752_b.jpg" />
			<div class="g-info">
				<div class="flex1">
					<div class="g-title clamp1">海陵岛大角湾风景区2天1晚</div>
					<div class="g-subtit clamp1">给你不一样的风景体验</div>
				</div>
				<div class="g-price c-red fs-32">￥<em>199.00</em></div>
			</div>
		</div>
		<!-- //数量加减 -->
		<div class="cart-item__num">
			<span class="minus disabled" onClick="$.cartNum.set(-1, this);">-</span>
			<input type="tel" value="1" onBlur="$.cartNum.check(this);" />
			<span class="plus normal" onClick="$.cartNum.set(+1, this);">+</span>
		</div>
		<!-- //删除 -->
		<img class="cart-item__del" src="img/icon_cart-del.png" />
	</div>
	<!-- ... -->
</div>

购物车底部固定模板

<!-- 购物车底部 -->
<div class="cart-wrap__bottomAction" style="padding-top:2rem;">
	<div class="bottomfixed">
		<div class="inner">
			<div class="chkAll flex1" id="J__chkAll">
				<i class="ico-radio"></i>
				<span>全选</span>
			</div>
			<div class="total rmr-24">合计：<span class="c-red fs-32">￥<em id="J__totalPrice">12232.00</em></span></div>
			<button class="gstyle-btn__primary btn-pay" id="J__goPay">结算 (<em id="J__selNum">12</em>)</button>
		</div>
	</div>
</div>

购物车数量

直接封装成$.cartNum函数，通过 $.cartNum.set() 、 $.cartNum.check(this) 调用即可。

<div class="cart-item__num">
	<span class="minus disabled" onClick="$.cartNum.set(-1, this);">-</span>
	<input type="tel" value="1" onBlur="$.cartNum.check(this);" />
	<span class="plus normal" onClick="$.cartNum.set(+1, this);">+</span>
</div>

$(function(){
	// 购物车数量
	$.cartNum={
		set: function(code, obj){
			var ipt=$(obj).siblings("input");
			var cartNums=parseInt($.trim(ipt.val()));
			switch (code) {
				case 1: {
					cartNums++;
				}
				break;
				case -1: {
					cartNums--;
				}
				break;
			}
			ipt.val(cartNums);
			$.cartNum.check(ipt);
			getTotalPrice();
		},
		check: function(obj){
			var o=$(obj);
			//数量小于0
			var cartNums=parseInt($.trim(o.val()));
			if (cartNums <=1) {
				o.val(1);
				o.siblings('.minus').addClass('disabled');
			}else {
				o.siblings('.minus').removeClass('disabled');
			}

			//判断数量是否是数字
			var regExp=/^[1-9]*[1-9][0-9]*$/;
			if (isNaN(cartNums) || !regExp.test($.trim(o.val()))) {
				o.val(1);
				o.siblings('.minus').addClass('disabled');
			}

			//数量大于库存（假定库存99）
			//var storeNums=parseInt($.trim($('#data_storeNums').text()));
			var storeNums=99;
			if (cartNums >=storeNums) {
				o.val(storeNums);
			}
			getTotalPrice();
		}
	};
});

绑定单选、全选

// 判断是否全选
chkAll();
function chkAll() {
	var $radio=$('#J__CartLS .cart-item__radio');
	var num=$radio.size();
	var k=0;
	$radio.each(function(i, v) {
		if($(this).hasClass('on')) {
			k++;
		}
	});
	if(k==num) {
		$('#J__chkAll').addClass('on');
	} else {
		$('#J__chkAll').removeClass('on');
	}
}
// 绑定单选
$('body').on('click', '#J__CartLS .cart-item__radio', function() {
	$(this).toggleClass('on');
	chkAll();
	getTotalPrice();
});
// 绑定全选
$('body').on('click', '#J__chkAll', function() {
	if($(this).hasClass('on')) {
		$('#J__CartLS .cart-item__radio').removeClass('on');
	} else {
		$('#J__CartLS .cart-item__radio').addClass('on');
	}
	$(this).toggleClass('on');
	getTotalPrice();
});

价格汇总

点击单选、全选及数量加减，都触发 getTotalPrice 函数。

// 价格汇总
getTotalPrice();
function getTotalPrice() {
	var $cartls=$('#J__CartLS').find('.cart-ls__item');
	var total=0, selected=0;
	$cartls.each(function(i, v) {
		if($(v).find('.cart-item__num input').val() > 1) {
			$(v).find('.cart-item__num .minus').removeClass('disabled'); //数量大于1减号可点击
		}
		if($(v).children('.cart-item__radio').hasClass('on')) {
			var num=$(v).find('.cart-item__num input').val(); //商品数量
			total +=parseFloat($(v).find('.g-price em').text() * num);
			selected++;
		}
	});
	$('#J__goPay').prop('disabled', selected < 1 ? true : false);
	$('#J__totalPrice').text(total.toFixed(2));
	$('#J__selNum').text(selected);
}

删除订单

删除订单后，移除该订单，触发 getTotalPrice 函数，当购物车为空，则提示无数据。

// 删除订单
$('#J__CartLS').on('click', '.cart-item__del', function() {
	var that=$(this);
	wcPop({
		skin: 'ios',
		style: 'border-radius:12px;font-family:arial;overflow:hidden;',
		content: '您确定要删除该条订单吗？',
		btns: [
			{
				text: '取消', style: 'color:#797979',
				onTap() { wcPop.close(); }
			},
			{
				text: '确定', style: 'color:#e0201f',
				onTap() {
					that.parents('.cart-ls__item').remove();
					wcPop.close();
					getTotalPrice();
					if($('#J__CartLS .cart-ls__item').size() > 0) {
						$('.J__bmBadge').text($('#J__CartLS .cart-ls__item').size());
					}else {
						$('.J__bmBadge').remove();
						$('.cart-nodata').fadeIn();
					}
				}
			}
		]
	})
});

ok，以上就是基于jquery实现的购物车功能。希望对大家有所帮助，感兴趣的可以参考一下。

如果大家有更优的方法，欢迎一起交流讨论哈~~

、介绍

电商购物系统。使用Python作为主要开发语言，前端采用HTML、CSS、BootStrap等技术实现界面，后端采用Django作为开发框架。实现一个电商购物系统。用户可以登录、注册、查看商品、添加购物车、购买商品、查看订单、评论等。管理员可以编辑用户和商品信息。

二、系统展示图片

三、演示视频 and 代码 and 介绍

视频+代码+介绍：电商购物 · 语雀

四、Django介绍

Django 是一个开源的、基于 Python 的 web 框架。它的主要目标是使得 Web 开发更加快速、更简单，同时还要保证代码的可重用性和可维护性。以下是 Django 的一些主要特点：

0. MTV 架构：Django 遵循 MTV（Model-Template-View）设计模式，这与经典的 MVC（Model-View-Controller）模式有些许不同。在 Django 中，Model 代表数据模型，Template 是负责展示的部分，而 View 负责处理用户请求并返回响应。
1. DRY 原则：Django 遵循 “Don't Repeat Yourself” (DRY) 原则，鼓励代码的重用。
2. 自带管理界面：Django 包括一个自动生成的、为内容管理定制的管理界面，只需很少的代码即可完成。
3. ORM：Django 自带了一个强大的 ORM（对象关系映射）系统，可以轻松地与多种数据库进行交互，同时还支持数据库的迁移。
4. 安全性：Django 有内置的防护措施，如跨站脚本攻击（XSS）、跨站请求伪造（CSRF）和 SQL 注入等。
5. 中间件支持：Django 的中间件系统允许开发者在处理请求和响应的过程中插入自定义的处理方法。

以下是一个简单的 Django 项目和应用的示例代码：

0. 创建一个新的 Django 项目：

django-admin startproject myproject

2. 进入项目目录并创建一个新的 Django 应用：

cd myproject
python manage.py startapp myapp

3. 定义模型 (在 myapp/models.py 中)：

from django.db import models

class Article(models.Model):
    title=models.CharField(max_length=200)
    content=models.TextField()
    pub_date=models.DateTimeField('date published')

    def __str__(self):
        return self.title

4. 在 myproject/settings.py 中添加 'myapp' 到 INSTALLED_APPS 列表：

INSTALLED_APPS=[
    ...
    'myapp',
    ...
]

5. 迁移数据库：

python manage.py makemigrations myapp
python manage.py migrate

6. 创建一个简单的视图 (在 myapp/views.py 中)：

from django.http import HttpResponse
from .models import Article

def index(request):
    articles=Article.objects.all()
    output=', '.join([a.title for a in articles])
    return HttpResponse(output)

7. 配置 URL (在 myapp/urls.py 中)：

from django.urls import path
from . import views

urlpatterns=[
    path('', views.index, name='index'),
]

8. 在 myproject/urls.py 中连接应用的 URLs：

from django.contrib import admin
from django.urls import path, include

urlpatterns=[
    path('admin/', admin.site.urls),
    path('articles/', include('myapp.urls')),
]

9. 运行开发服务器：

python manage.py runserver

当您访问 127.0.0.1:8000/articles/，您应该会看到数据库中所有文章的标题（如果有的话）。