三十八、jquery 購物車功能實現demo
阿新 • • 發佈：2018-12-16
說明：所有功能及實現原理和js購物車一致，只是將所用語法改寫為了jquery語法
一、利用table標籤簡單建立介面樣式；
二、首先實現全選、單選功能
1.全選功能時需要判斷是否有checked屬性；在jquery中設定或返回被選元素的屬性/值的方法有兩種attr()及prop()；
需要注意的是attr()並不能用來檢測單選框是否被選擇，它會返回undefined值，即並不能使用attr()方法獲取checked屬性；那麼這裡只能用prop()屬性獲取checked屬性，但是注意，所返回的並不是checked/null,而true/false，所以在判斷/設定單選框是否被選中時也需要用 true/false；
還需注意的是：js和jquery不同的是，js無法對一組資料，即集合進行操作，需要對這組資料進行遍歷，而jquery可以，jquery所獲取的元素是集合，並且jquery存在隱式迭代，所以可以同時對一組資料進行操作；
//全選 $(".all_ck").click(function(){ //判斷是否選中 if($(this).prop("checked")){ //true $(".ck_box").prop({ //隱式迭代 鏈式操作 checked:true }).parents("tr").css("backgroundColor","pink"); }else{ $(".ck_box").prop({ //隱式迭代 鏈式操作 checked:false }).parents("tr").css("backgroundColor",""); } }); //單選 $(".ck_box").each(function(){ $(this).click(function(){ if($(this).prop("checked")){ $(this).parents("tr").css("backgroundColor","pink") }else { $(this).parents("tr").css("backgroundColor","") } }) })
三、數量事件：加減按鈕的事件和輸入數量的事件
1.加減事件和js的一樣，只是這裡添加了輸入數量的事件，注意需要判讀輸入的值必須是數字不能是字元。可以用失焦blur()方法實現，也可以用按鍵事件，這裡使用了keypress()和keyup();(按下、擡起事件)
注意：獲取輸入框value值使用的是val()方法
//數量 $(".minus").each(function(){ $(this).click(function(){ var number=$(this).siblings(".num").val(); number--; $(this).siblings(".num").val(number<1?1:number); }) }); $(".add").each(function(){ $(this).click(function(){ var number=$(this).siblings(".num").val(); number++; $(this).siblings(".num").val(number); }) }); $(".num").each(function(){ $(this).keypress(function(e){ if(isNaN(e.key)||e.keyCode==32){//32是空格鍵值 return false; } }).keyup(function(){ //呼叫小計 總價函式 }); });
四、封裝小計、總價函式，並呼叫函式
這兩個函式與js封裝一致；
唯一需要注意的是小計函式中因為要給加減和輸入框事件呼叫，其傳參的物件不一致，在函式中需要用is()方法對物件進行判斷；（is()方法：根據選擇器/元素/jQuery 物件檢查匹配元素集合，如果存在至少一個匹配元素，則返回 true）
//封裝小計函式
function SamllPrice(obj) {
var number=0;
if(obj.is(".num")){
number=obj.val();
}else{
number=obj.siblings(".num").val();
}
//獲取單價
var len=obj.parent().prev().html().length;
var price=parseFloat(obj.parent().prev().html().substr(1,len-1));
//計算小計
obj.parent().next().html("￥"+(price*number).toFixed(2));
}
//封裝總價
function AllPrice(){
var all_price=0;
$(".ck_box").each(function(){
if($(this).prop("checked")){
var len=$(this).parents("tr").find(".smallprice").html().length;
all_price+=parseFloat($(this).parents("tr").find(".smallprice").html().substr(1,len));
}
})
$(".allprice").html("￥"+all_price.toFixed(2));
}五、刪除事件
$(".delet").each(function(){
$(this).click(function(){
if($(this).parents("tr").find(".ck_box").prop("checked")){
$(this).parents("tr").remove();
AllPrice();
}
})
});六、完整程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>購物車demo</title>
<style>
*{margin: 0;padding: 0;}
.tab{
width: 1000px;
height: auto;
margin: 20px auto;
border-collapse: collapse;/*去除table間距*/
}
.header,.footer{
width: 100%;
line-height: 40px;
background-color: rgba(241, 241, 241, 0.42);
text-align: center;
}
.td_d,.goods{
width: 10%;
border: 1px solid black;
}
.goods{
width: 40%;
text-align: left;
padding-left: 20px;
}
.list{
text-align: center;
}
.num{
width: 35px;
outline: none;
text-align: center;
}
.minus,.add{
width: 25px;
}
</style>
</head>
<body>
<table class="tab">
<tr class="header">
<td class="td_d"><input class="all_ck" type="checkbox">全選</td>
<td class="goods">商品</td>
<td class="td_d">單價</td>
<td class="td_d">數量</td>
<td class="td_d">小計</td>
<td class="td_d">操作</td>
</tr>
<tr class="list">
<td class="td_d"><input class="ck_box" type="checkbox"></td>
<td class="goods"><img src="image/1.png" align="left"><span>三隻松鼠-碧根果210g</span></td>
<td class="td_d price">￥38.90</td>
<td class="td_d"><button class="minus">-</button><input class="num" value="1" type="text"><button class="add">+</button></td>
<td class="td_d smallprice">￥38.90</td>
<td class="td_d"><button class="delet">刪除</button></td>
</tr>
<tr class="list">
<td class="td_d"><input class="ck_box" type="checkbox"></td>
<td class="goods"><img src="image/1.png" align="left"><span>三隻松鼠-碧根果210g</span></td>
<td class="td_d price">￥38.90</td>
<td class="td_d"><button class="minus">-</button><input class="num" value="1" type="text"><button class="add">+</button></td>
<td class="td_d smallprice">￥38.90</td>
<td class="td_d"><button class="delet">刪除</button></td>
</tr>
<tr class="list">
<td class="td_d"><input class="ck_box" type="checkbox"></td>
<td class="goods"><img src="image/1.png" align="left"><span>三隻松鼠-碧根果210g</span></td>
<td class="td_d price">￥38.90</td>
<td class="td_d"><button class="minus">-</button><input class="num" value="1" type="text"><button class="add">+</button></td>
<td class="td_d smallprice">￥38.90</td>
<td class="td_d"><button class="delet">刪除</button></td>
</tr>
<tr class="list">
<td class="td_d"><input class="ck_box" type="checkbox"></td>
<td class="goods"><img src="image/1.png" align="left"><span>三隻松鼠-碧根果210g</span></td>
<td class="td_d price">￥38.90</td>
<td class="td_d"><button class="minus">-</button><input class="num" value="1" type="text"><button class="add">+</button></td>
<td class="td_d smallprice">￥38.90</td>
<td class="td_d"><button class="delet">刪除</button></td>
</tr>
<tr class="list">
<td class="td_d"><input class="ck_box" type="checkbox"></td>
<td class="goods"><img src="image/1.png" align="left"><span>三隻松鼠-碧根果210g</span></td>
<td class="td_d price">￥38.90</td>
<td class="td_d"><button class="minus">-</button><input class="num" value="1" type="text"><button class="add">+</button></td>
<td class="td_d smallprice">￥38.90</td>
<td class="td_d"><button class="delet">刪除</button></td>
</tr>
<tr class="footer">
<td colspan="6">總價：<span class="allprice">￥0.00</span></td>
</tr>
</table>
<script src="js/jquery-3.0.0.js"></script>
<script>
$(function(){
//全選
$(".all_ck").click(function(){
//判斷是否選中
if($(this).prop("checked")){ //true
$(".ck_box").prop({ //隱式迭代 鏈式操作
checked:true
}).parents("tr").css("backgroundColor","pink");
}else{
$(".ck_box").prop({ //隱式迭代 鏈式操作
checked:false
}).parents("tr").css("backgroundColor","");
}
AllPrice();
});
//單選
$(".ck_box").each(function(){
$(this).click(function(){
if($(this).prop("checked")){
$(this).parents("tr").css("backgroundColor","pink")
}else {
$(this).parents("tr").css("backgroundColor","")
}
AllPrice();
});
});
//數量
$(".minus").each(function(){
$(this).click(function(){
var number=$(this).siblings(".num").val();
number--;
$(this).siblings(".num").val(number<1?1:number);
SamllPrice($(this));
AllPrice();
})
});
$(".add").each(function(){
$(this).click(function(){
var number=$(this).siblings(".num").val();
number++;
$(this).siblings(".num").val(number);
SamllPrice($(this));
AllPrice();
})
});
$(".num").each(function(){
$(this).keypress(function(e){
if(isNaN(e.key)||e.keyCode==32){//32是空格鍵值
return false;
}
}).keyup(function(){
//呼叫小計 總價函式
SamllPrice($(this));
AllPrice();
});
});
//刪除事件
$(".delet").each(function(){
$(this).click(function(){
if($(this).parents("tr").find(".ck_box").prop("checked")){
$(this).parents("tr").remove();
AllPrice();
}
})
});
//封裝小計函式
function SamllPrice(obj) {
var number=0;
if(obj.is(".num")){
number=obj.val();
}else{
number=obj.siblings(".num").val();
}
//獲取單價
var len=obj.parent().prev().html().length;
var price=parseFloat(obj.parent().prev().html().substr(1,len-1));
//計算小計
obj.parent().next().html("￥"+(price*number).toFixed(2));
}
//封裝總價
function AllPrice(){
var all_price=0;
$(".ck_box").each(function(){
if($(this).prop("checked")){
var len=$(this).parents("tr").find(".smallprice").html().length;
all_price+=parseFloat($(this).parents("tr").find(".smallprice").html().substr(1,len));
}
})
$(".allprice").html("￥"+all_price.toFixed(2));
}
})
</script>
</body>
</html>