溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關使用jquery怎么實現一個購物車功能，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
1.html代碼：
<body> <div class="empty"> 購物車空空如也，<a href="javascript:void(0);" >快去選購吧</a> </div> <table border="2px solid #ccc" id="table"> <thead> <th> <input type="checkbox" class="checkOnly" >全選 </th> <th>序號</th> <th>商品名稱</th> <th>數量</th> <th>單價</th> <th>小計</th> <th>操作</th> </thead> <tbody> <tr> <td> <input type="checkbox" class="check"> </td> <td class="num">1</td> <td>烤煎餅</td> <td> <span> <input type="button" value="-" class="reduces"> <span class="span">1</span> <input type="button" value="+" class="adds"> </span> </td> <td>單價： <span class="price">2</span> </td> <td> 小計： <span class="prices">2</span> </td> <td> <a href="#" class="del">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" class="check"> </td> <td class="num">2</td> <td>珍珠奶茶</td> <td> <span> <input type="button" value="-" class="reduces"> <span class="span">1</span> <input type="button" value="+" class="adds"> </span> </td> <td>單價： <span class="price">4</span> </td> <td> 小計： <span class="prices">4</span> </td> <td> <a href="#" class="del">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" class="check"> </td> <td class="num">3</td> <td>水煮魚</td> <td> <span> <input type="button" value="-" class="reduces"> <span class="span">1</span> <input type="button" value="+" class="adds"> </span> </td> <td>單價： <span class="price">20</span> </td> <td> 小計： <span class="prices">20</span> </td> <td> <a href="#" class="del">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" class="check"> </td> <td class="num">4</td> <td>蛋糕</td> <td> <span> <input type="button" value="-" class="reduces"> <span class="span">1</span> <input type="button" value="+" class="adds"> </span> </td> <td>單價： <span class="price">50</span> </td> <td> 小計： <span class="prices">50</span> </td> <td> <a href="#" class="del">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" class="check"> </td> <td class="num">5</td> <td>土豆片</td> <td> <span> <input type="button" value="-" class="reduces"> <span class="span">1</span> <input type="button" value="+" class="adds"> </span> </td> <td>單價： <span class="price">5</span> </td> <td> 小計： <span class="prices">5</span> </td> <td> <a href="#" class="del">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" class="check"> </td> <td class="num">6</td> <td>蛋黃派</td> <td> <span> <input type="button" value="-" class="reduces"> <span class="span">1</span> <input type="button" value="+" class="adds"> </span> </td> <td>單價： <span class="price">5.5</span> </td> <td> 小計： <span class="prices">5.5</span> </td> <td> <a href="#" class="del">刪除</a> </td> </tr> <tr> <td colspan="7" class="talast"> <span>商品一共 <span class="goods_num" >0</span> 件; 共計花費 <span class="pricetal" >0</span> 元; 其中最貴的商品單價是 <span class="pricest" >0</span> 元</span> </td> </tr> </tbody> </table> </body>
2.css代碼：
<style type="text/css">
table {
width: 1000px;
/* height: 300px; */
border-collapse: collapse;
table-layout: fixed;
text-align: center;
font-size: 18px;
margin: 0 auto;
}
a {
text-decoration: none;
color: black;
}
tr {
height: 50px;
}
.check {
width: 20px;
height: 20px;
}
.checkOnly {
width: 20px;
height: 20px;
}
.empty {
font-size: 25px;
position: fixed;
top: 45%;
left: 45%;
display: none;
}
.empty a {
color: pink;
}
.empty a:hover {
text-decoration: underline;
}
</style>3.js代碼：
<script src="js/jquery-1.8.3.min.js"></script> //引入jquery
<script src="js/Allcheck.js"></script> //引入封裝好的全選反選插件
<script>
$(function () {
$(".adds").each(function () { //點擊增加的按鈕
$(this).click(function () {
//1.改變數量
var count = parseFloat($(this).parents("tr").find(".span").html());
count++;
$(this).parent("span").find(".span").html(count);
//2.改小計(先找到單價與數量，再相乘，最后放在小計(“.prices”)里)
var price = parseFloat($(this).parents("tr").find(".price").html());
var money = (price * count);
$(this).parents("tr").find(".prices").html(money);
//3.改總價
total();
countAll();//最后的總數量
compare();//選中復選框時比較商品單價中最高的
});
});
$(".reduces").each(function () {//點擊減少的按鈕
$(this).click(function () {
//1.改變數量
var count = parseFloat($(this).parents("tr").find(".span").html());
count--;
if (count < 1) { //當數量減到1時不能再減
return;
}
$(this).parent("span").find(".span").html(count);
//2.改小計
var price = parseFloat($(this).parents("tr").find(".price").html());
var money = (price * count);
$(this).parents("tr").find(".prices").html(money);
total();
countAll();//最后的總數量
compare();//選中復選框時比較商品單價中最高的
});
});
//刪除
$(".del").each(function () {
$(this).click(function () {
let re = $(this).parents("tr"); //找到要刪除的行
if (confirm("你確定刪除嗎？")) {
re.remove();
}
total();
countAll(); //總數量
compare(); //最貴的
//刪除后重新排序號
for (let i = 0; i < $(".num").length; i++) {
$(".num")[i].innerHTML = i + 1;
}
//全都刪除時清空table(通過獲取tbody的高度來判斷)
let clear = $("tbody").height();
if (clear == 50) {
$("table").remove();
$(".empty").css({ //刪完時顯示"購物車為空"這個盒子
display: "block"
});
}
});
});
//合計
function total() {
let sum = 0;
$(".prices").each(function () {//先循環每個小計
if (($(this).parents("tr").find(".check")).prop("checked")) {//判斷復選框有沒有選中
sum += parseFloat($(this).html());
}
$(".pricetal").html(sum);
});
}
//總數量
function countAll() {
let counts = 0;
for(let i=0;i<$(".check").length;i++){
if($(".check")[i].checked==true){ //注意此塊用jquery不好實現
counts+=parseInt( $('.span')[i].innerHTML);
}
}
$(".goods_num")[0].innerHTML=counts;
}
//最貴商品比較
function compare() {
let temp = 0;
for (let i = 0; i < $(".price").length; i++) { //循環單價
if($(".check")[i].checked==true){
var temps = parseFloat($(".price")[i].innerHTML);
if (temps > temp) {
temp = temps;
}
}
};
$(".pricest").html(temp);
}
//全選插件(引入插件Allcheck.js)
$(".checkOnly").bindCheck($("#table :checkbox"));
//當點擊復選框時調用total()
$(".check").each(function (){
$(this).click(function () {
let num = 0;
$(".check").each(function () {
if ($(this).prop("checked")) {
num++;
}
countAll();
total();
compare(); //最貴的
});
if(num == $(".check").length){//如果復選框的長度與num相等時，全選那個按鈕也會被選中
$(".checkOnly")[0].checked = true;
compare(); //最貴的
countAll(); //總數量
total();
}else{
$(".checkOnly")[0].checked = false;
}
});
});
$(".checkOnly").click(function () {
total();
countAll(); //總數量
compare(); //最貴的
});
});
</script>補充上面js代碼中用到的全選反選插件 \color{red}{補充上面js代碼中用到的全選反選插件}補充上面js代碼中用到的全選反選插件
//1、定義全選的插件
jQuery.fn.extend({
bindCheck:function($subCheckBox,$btnUncheck){
let $allCheckBox = this;
//1、給全選復選框綁定click事件
//this:是全選復選框（jQuery對象）
this.click(function(){
let isChecked = this.checked;
$subCheckBox.each(function(){
this.checked = isChecked;
});
});
//2、給反選
if(arguments.length==2){
$btnUncheck.click(function(){
$subCheckBox.each(function(){
this.checked = !this.checked;
});
reversCheck();
});
}
//3、給每個選擇項的復選框綁定事件
$subCheckBox.click(function(){
reversCheck();
});
function reversCheck(){
//1、判斷是否全部的復選框被選中
let isAllChecked = true;
$subCheckBox.each(function(){
if(!this.checked){
isAllChecked = false;
}
});
//2、處理全選復選框
$allCheckBox.attr("checked",isAllChecked);
}
}
});以上就是使用jquery怎么實現一個購物車功能，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
