jQuery實現購物車的增刪改查
一、購物車頁面效果圖
shop-cart.html的程式碼
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>北榛購物車</title>
<!-- 引入css 初始化的css 檔案 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入公共樣式的css 檔案 -->
<link rel="stylesheet" href="css/common.css">
<!-- 引入car css -->
<link rel="stylesheet" href="css/car.css">
<!-- 先引入jquery -->
<script src="js/jquery.min.js"></script>
<!-- 在引入我們自己的js檔案 -->
<script src="js/car.js"></script>
</head>
<body>
<div class="car-header">
<div class="w">
<div class="car-logo">
<b>北榛購物車</b>
</div>
</div>
</div>
</div>
<div class="c-container">
<div class="w">
<div class="cart-filter-bar">
<em>全部商品</em>
</div>
<!-- 購物車主要核心區域 -->
<div class="cart-warp">
<!-- 頭部全選模組 -->
<div class="cart-thead">
<div class="t-checkbox">
<input type="checkbox" name="" id="" class="checkall"> 全選
</div>
<div class="t-goods">商品</div>
<div class="t-price">單價</div>
<div class="t-num">數量</div>
<div class="t-sum">小計</div>
<div class="t-action">操作</div>
</div>
<!-- 商品詳細模組 -->
<div class="cart-item-list">
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p1.jpg" alt="">
</div>
<div class="p-msg">【5本26.8元】經典兒童文學彩圖青少版八十天環遊地球中學生語文教學大綱</div>
</div>
<div class="p-price">¥12.60</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<!-- 讓輸入框只能輸入正整數 onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"-->
<input type="text" class="itxt" value="1" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">¥12.60</div>
<div class="p-action"><a href="javascript:;">刪除</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p2.jpg" alt="">
</div>
<div class="p-msg">【2000張貼紙】貼紙書 3-6歲 貼畫兒童 貼畫書全套12冊 貼畫 貼紙兒童 汽</div>
</div>
<div class="p-price">¥24.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">¥24.80</div>
<div class="p-action"><a href="javascript:;">刪除</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p3.jpg" alt="">
</div>
<div class="p-msg">唐詩三百首+成語故事全2冊 一年級課外書 精裝注音兒童版 小學生二三年級課外閱讀書籍</div>
</div>
<div class="p-price">¥29.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">¥29.80</div>
<div class="p-action"><a href="javascript:;">刪除</a></div>
</div>
</div>
<!-- 結算模組 -->
<div class="cart-floatbar">
<div class="select-all">
<input type="checkbox" name="" id="" class="checkall">全選
</div>
<div class="operation">
<a href="javascript:;" class="remove-batch"> 刪除選中的商品</a>
<a href="javascript:;" class="clear-all">清理購物車</a>
</div>
<div class="toolbar-right">
<div class="amount-sum">已經選<em>0</em>件商品</div>
<div class="price-sum">總價: <em>¥00.00</em></div>
<div class="btn-area">去結算</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
car.js程式碼
$(function(){
//1.當全選改變時
$(".checkall").change(function(){
//單選跟隨全選變化
$(".j-checkbox,.checkall").prop("checked",$(this).prop("checked"));
//單選的css變化
if($(this).prop("checked")){
$(".cart-item").addClass("check-cart-item");
} else {
$(".cart-item").removeClass("check-cart-item");
}
//重新整理總價
flushSumPrice();
})
//2.當單選改變時
$(".j-checkbox").change(function(){
//全選跟隨單選變化
if($(".j-checkbox:checked").length == $(".j-checkbox").length){
$(".checkall").prop("checked",true);
} else {
$(".checkall").prop("checked",false);
}
//單選的css變化
if($(this).prop("checked")){
$(this).parents(".cart-item").addClass("check-cart-item");
} else {
$(this).parents(".cart-item").removeClass("check-cart-item");
}
//重新整理總價
flushSumPrice();
})
//3.增減商品,修改價格
//點選加號時
$(".increment").click(function(){
//獲得輸入框的數量
var num = $(this).siblings(".itxt").val();
//加一
num++;
that = this;
//重新整理小計
flushSum(that,num);
//重新整理總價
flushSumPrice();
})
//點選減號時
$(".decrement").click(function(){
//獲得輸入框的數量
var num = $(this).siblings(".itxt").val();
//如果數量大於一
if(num > 1){
//減一
num--;
}
that = this;
//重新整理小計
flushSum(that,num);
//重新整理總價
flushSumPrice();
})
//4.使用者修改輸入框
$(".itxt").change(function(){
//獲得輸入框的數量
var num = $(this).val();
//判斷是否輸入有誤
if(num == ""){
alert("輸入有誤");
num = 1;
$(this).val(1);
}
that = this;
//重新整理小計
flushSum(that,num);
//重新整理總價
flushSumPrice();
})
//5.刪除商品,清空購物車
//當點選商品後面的刪除按鈕時
$(".p-action a").click(function(){
//刪除當前商品
$(this).parents(".cart-item").remove();
//重新整理總價
flushSumPrice();
})
//刪除選中的商品
$(".remove-batch").click(function(){
//刪除勾選的商品
$(".j-checkbox:checked").parents(".cart-item").remove();
//重新整理總價
flushSumPrice();
})
//清空購物車
$(".clear-all").click(function(){
//刪除所有商品
$(".cart-item").remove();
//重新整理總價
flushSumPrice();
})
//重新整理總計和總數量
function flushSumPrice(){
//總件數
var count = 0;
//總價錢
var money = 0;
//遍歷數量
$(".itxt").each(function(i,ele){
//如果勾選上了
if($(this).parents(".cart-item").find(".j-checkbox").prop("checked") == true){
//累加
count += parseInt($(ele).val());
}
})
//重新整理總數量
$(".amount-sum em").text(count);
//遍歷價錢
$(".p-sum").each(function(i,ele){
//如果勾選上了
if($(this).parents(".cart-item").find(".j-checkbox").prop("checked") == true){
//累加
money += parseFloat($(ele).text().substr(1));
}
})
//重新整理總價錢
$(".price-sum em").text("¥" + money.toFixed(2));
}
//重新整理小計
function flushSum(that,num){
//判斷庫存
if(num > 999){
alert("庫存不足");
num = 1;
$(that).val(1);
}
//重新整理商品數量
$(that).siblings(".itxt").val(num);
//獲得商品的價格
var price = $(that).parents(".p-num").siblings(".p-price").text();
//擷取字串並轉型
price = parseFloat(price.substr(1));
//獲得商品小計
sum = num * price;
//重新整理商品小計,商品小計保留兩位小數
$(that).parents(".p-num").siblings(".p-sum").text("¥"+sum.toFixed(2));
}
})
購物車共分為全選、單選、增減商品,修改價格、使用者修改輸入框、刪除商品,清空購物車五個小模組
二、全選
首先要定義兩個方法,重新整理總價和總數量以及重新整理小計,因為單選、反選、增刪改查操作會複用這兩個方法,所有把它單獨抽取出來封裝。
注意:字串擷取substr(1),保留兩位小數toFixed(2)
//重新整理總計和總數量
function flushSumPrice(){
//總件數
var count = 0;
//總價錢
var money = 0;
//遍歷數量
$(".itxt").each(function(i,ele){
//如果勾選上了
if($(this).parents(".cart-item").find(".j-checkbox").prop("checked") == true){
//累加
count += parseInt($(ele).val());
}
})
//重新整理總數量
$(".amount-sum em").text(count);
//遍歷價錢
$(".p-sum").each(function(i,ele){
//如果勾選上了
if($(this).parents(".cart-item").find(".j-checkbox").prop("checked") == true){
//累加
money += parseFloat($(ele).text().substr(1));
}
})
//重新整理總價錢
$(".price-sum em").text("¥" + money.toFixed(2));
}
//重新整理小計
function flushSum(that,num){
//判斷庫存
if(num > 999){
alert("庫存不足");
num = 1;
$(that).val(1);
}
//重新整理商品數量
$(that).siblings(".itxt").val(num);
//獲得商品的價格
var price = $(that).parents(".p-num").siblings(".p-price").text();
//擷取字串並轉型
price = parseFloat(price.substr(1));
//獲得商品小計
sum = num * price;
//重新整理商品小計,商品小計保留兩位小數
$(that).parents(".p-num").siblings(".p-sum").text("¥"+sum.toFixed(2));
}
思路:單選跟隨全選變化,單選的css變化,並重新整理總價
//1.當全選改變時
$(".checkall").change(function(){
//單選跟隨全選變化
$(".j-checkbox,.checkall").prop("checked",$(this).prop("checked"));
//單選的css變化
if($(this).prop("checked")){
$(".cart-item").addClass("check-cart-item");
} else {
$(".cart-item").removeClass("check-cart-item");
}
//重新整理總價
flushSumPrice();
})
三、單選
思路:全選跟隨單選變化,單選的css變化,並重新整理總價
//2.當單選改變時
$(".j-checkbox").change(function(){
//全選跟隨單選變化
if($(".j-checkbox:checked").length == $(".j-checkbox").length){
$(".checkall").prop("checked",true);
} else {
$(".checkall").prop("checked",false);
}
//單選的css變化
if($(this).prop("checked")){
$(this).parents(".cart-item").addClass("check-cart-item");
} else {
$(this).parents(".cart-item").removeClass("check-cart-item");
}
//重新整理總價
flushSumPrice();
})
四、增減商品,修改價格
思路:點選加號時,獲得輸入框的數量,加一,重新整理小計,重新整理總價。減同理,注意只能減到一件
//3.增減商品,修改價格
//點選加號時
$(".increment").click(function(){
//獲得輸入框的數量
var num = $(this).siblings(".itxt").val();
//加一
num++;
that = this;
//重新整理小計
flushSum(that,num);
//重新整理總價
flushSumPrice();
})
//點選減號時
$(".decrement").click(function(){
//獲得輸入框的數量
var num = $(this).siblings(".itxt").val();
//如果數量大於一
if(num > 1){
//減一
num--;
}
that = this;
//重新整理小計
flushSum(that,num);
//重新整理總價
flushSumPrice();
})
五、使用者修改輸入框
思路:獲得輸入框的數量,判斷是否輸入有誤,重新整理小計,重新整理總價
注意:不能讓輸入框輸入非法字元,負數,小數以及很大的數量
在shop-cart.html網頁的輸入框加入 οnkeyup=“value=value.replace(/(0+)|[\d]+/g,’’)”
//4.使用者修改輸入框
$(".itxt").change(function(){
//獲得輸入框的數量
var num = $(this).val();
//判斷是否輸入有誤
if(num == ""){
alert("輸入有誤");
num = 1;
$(this).val(1);
}
that = this;
//重新整理小計
flushSum(that,num);
//重新整理總價
flushSumPrice();
})
六、刪除商品,清空購物車
思路:當點選商品後面的刪除按鈕時,刪除當前商品,重新整理總價。刪除選中和清空同理
//5.刪除商品,清空購物車
//當點選商品後面的刪除按鈕時
$(".p-action a").click(function(){
//刪除當前商品
$(this).parents(".cart-item").remove();
//重新整理總價
flushSumPrice();
})
//刪除選中的商品
$(".remove-batch").click(function(){
//刪除勾選的商品
$(".j-checkbox:checked").parents(".cart-item").remove();
//重新整理總價
flushSumPrice();
})
//清空購物車
$(".clear-all").click(function(){
//刪除所有商品
$(".cart-item").remove();
//重新整理總價
flushSumPrice();
})
相關文章
- 【jquery】實現購物車加減jQuery
- 關於ToDolist 的增刪改查 用jQuery來實現jQuery
- jQuery實現的對元素的增刪改查程式碼例項jQuery
- js實現表格的增刪改查JS
- Go實現對MySQL的增刪改查GoMySql
- FMDB | 實現資料的增刪改查
- 運用layui實現增刪改查UI
- jquery基本操作增刪改查有哪些?jQuery
- 購物車的實現原理
- Java實現簡單的增刪改查操作Java
- 單連結串列實現增刪改查
- 封裝模組實現商品增刪改查封裝
- 看Zepto如何實現增刪改查DOM
- mybatis實現MySQL資料庫的增刪改查MyBatisMySql資料庫
- 增刪改查
- Node.js+Express+Mysql 實現增刪改查Node.jsExpressMySql
- Mybatis-plus實現簡單增刪改查MyBatis
- 購物車原理以及實現
- Vue實現購物車效果Vue
- React實現購物車功能React
- layui的增刪改查UI
- 列表的增刪改查
- 字典的增刪改查
- redist的增刪改查Redis
- Mybatis的增刪改查MyBatis
- MongoDB的增刪改查MongoDB
- ThinkPHP的增、刪、改、查PHP
- jQuery 加入購物車 彈窗jQuery
- jquery簡單購物車功能jQuery
- Node+Vue實現對資料的增刪改查Vue
- 使用Mongoose類庫實現簡單的增刪改查Go
- 用jsp實現資料庫的增刪改查JS資料庫
- indexedDB 增刪改查Index
- SQL增刪改查SQL
- mysql增刪改查MySql
- Mongoose查增改刪Go
- FMDB增刪改查
- mysql增查刪改MySql