近一直忙于公司的一個新的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/，您應該會看到數據庫中所有文章的標題（如果有的話）。