<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery.min.js"></script>
<style>
.current {
width: 300px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="cart-thead">
<div class="t-checkbox">我是全選
<input type="checkbox" name="" id="" class="checkall">
</div>
</div>
<div class="num">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-price">￥12.6</div>
<div class="quantitu-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="crement">+</a>
</div>
<div class="p-sum">￥12.6</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
<div class="num">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-price">￥12.6</div>
<div class="quantitu-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="crement">+</a>
</div>
<div class="p-sum">￥12.6</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
<div class="num">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-price">￥12.6</div>
<div class="quantitu-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="crement">+</a>
</div>
<div class="p-sum">￥12.6</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
<div class="toolbar-right">
<div class="amount-sum">已經選<em>1</em>件商品</div>
<div class="price-sum">總價<em>￥12.6</em></div>
</div>
<div class="operation">
<a href="javascript:;" class="remove-batch">删除選中的商品</a>
<a href="javascript:;" class="clear-all">清理購物車</a>
</div>
<div class="cart-floatbar">
<div class="selectall">我是全選的
<input type="checkbox" name="" id="" class="checkall">
</div>
</div>
<script>
//點選加号 取的兄弟文本框的值
$(function() {
$(".crement").click(function() {
//得到兄弟文本框的值
var n = $(this).siblings(".itxt").val();
n++;
$(this).siblings(".itxt").val(n);
//得到商品價格
var p = $(this).parent().siblings(".p-price").html();
//目前商品的價格
p = p.substr(1);
var p = $(this).parent().siblings(".p-sum").html("￥" + p * n);
getSum();
});
$(".decrement").click(function() {
//得到兄弟文本框的值
var n = $(this).siblings(".itxt").val();
if (n == 1) {
return false;
}
n--;
$(this).siblings(".itxt").val(n);
//得到商品價格
var p = $(this).parent().siblings(".p-price").html();
//目前商品的價格
p = p.substr(1);
var p = $(this).parent().siblings(".p-sum").html("￥" + p * n);
getSum();
});
//修改小計
$(".itxt").change(function() {
var n = $(this).val();
var p = $(this).parent().siblings(".p-price").html();
//目前商品的價格
p = p.substr(1);
var p = $(this).parent().siblings(".p-sum").html("￥" + p * n);
getSum();
});
getSum();
//求和
function getSum() {
var count = 0; //計算總件數
var money = 0; //計算總價錢
$(".itxt").each(function(i, ele) {
count += parseInt($(ele).val());
});
$(".amount-sum em").text(count);
//價格小計
$(".p-sum").each(function(i, ele) {
money += parseFloat($(ele).text().substr(1));
});
$(".price-sum em").text("￥" + money.toFixed(2));
}
//删除商品子產品
//商品後面的删除按鈕
$(".p-action a").click(function() {
//删除目前的商品
console.log($(this).parent(".num"));
$(this).parents(".num").remove();
getSum();
});
//删除對應的商品
$(".remove-batch").click(function() {
//删除是複選框選中的
$(".j-checkbox:checked").parents(".num").remove();
getSum();
})
//清空購物車
$(".clear-all").click(function() {
$(".num").remove();
getSum();
})
//全選按鈕
//全選按鈕狀态給三個小的
//事件用change
$(".checkall").change(function() {
//跟随全選按鈕狀态變化
console.log($(this).prop("checked"));
$(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
//
if ($(this).prop("checked")) {
$(".num").addClass("current");
} else {
$(".num").removeClass("current");
}
});
//通過小的複選框來選中全選按鈕
$(".j-checkbox").change(function() {
//超過三個就全選
if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
//目前商品添加
if ($(this).prop("checked")) {
$(this).parents(".num").addClass("current");
} else {
$(this).parents(".num").removeClass("current");
}
})
})
</script>
</body>
</html> 運作結果
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)