最近學習了jquery的內容,做乙個小型購物車來練習鞏固一下。
基本樣式搭建
首先進行基本樣式的搭建,在頁面裡新增幾個div用來布局一些購物車所需要的模組。
全選序號
名稱單價
數量小計
操作
效果如下:
全選序號
名稱單價
數量小計
操作
反選
總計:0.00¥
去結算》
效果如下:
首先寫一些json物件來模擬從資料庫中調取資料。
注意:寫jquery**前記得呼叫jquery庫,否則**是不起作用的。
接下來是匯入資料並且布局。操作**如下所示:
$(function());
});
效果如下所示:
邏輯功能實現:
實現全選、反選以及單選的功能:
$(".allck").click(function ()
else
addallprice();//計算總價
});function ckallbox(obj)
else
if (ckcount == $(".iptck").length)
else
}var ckcount = 0;
$(".iptck").click(function () );
//反選功能
$(".fckbtn").click(function ()
else
//當前的行變色
$(".cartpar").eq(index).toggleclass("cartbg");
ckallbox($(ele));
addallprice();//計算總價
});});
效果如下:
smalltottle($(this).parent(), num);//計算小計的方法
addallprice();//計算總價
});$(".btnright").click(function () );
//計算小計的方法
function smalltottle(par, number)
//計算總價的方法 根據當前行有沒有被選擇
function addallprice()
});//直接給總計賦值
$(".allprice").html(allprice.tofixed(2));
}效果如下:
//刪除操作
$(".btn_remove").each(function () );
});
如圖:
還有在數量框自定義輸入數量的功能。
//使用者的文字框輸入功能
$(".number").keydown(function (e)
}if (isnan(e.key) && e.key != "backspace")
});
效果:
總結:在這個購物車的實踐中,我深深的感覺到了jquery的魅力。它可以很方便的實現一些功能,相比js更加的簡潔和方便。主要運用的還是對jquery對dom元素的獲取修改樣式賦予功能等等,需要多練才能自由運用,這樣程式設計效率將會大大提公升。
jquery加購物車功能
如下圖所示 點選加入購物車,由下到上出現此彈窗,點選close關閉彈窗。addcar on click function 500 10 關閉按鈕 dialog close on click function 600 dialog content eq 0 animate 500 初始化有預設選中,有...
購物車jQuery選擇 賦值
思路 1.給tbody乙個id shoplist 當進入購物車時如果有兩個商品被勾選了,需要計算出總價錢 2.當手動勾選商品時,也要把相應的 加到總價中去 3.給全選新增乙個id checkall 當勾選全部選中時,要計算所有商品的總價要注意的是 這個函式,當單選是也要觸發,因為當全部商品都勾選時也...
python之購物車
下面是我們這個程式的框架 下面說一些 中比較難理解的 下面這個自己領會就好啦,本人不多做介紹 a if not a print a列表為空的 else print a列表不為空 下面主要介紹一下index這個函式,index在英語中是索引的意思,在這裡也一樣,它是用來看看某個值在列表中的索引是多少,...