Dans le chapitre précédent, nous avons présenté l'utilisation de JavaScript pour implémenter la fonction de panier
Dans ce chapitre, nous utilisons une version simplifiée de la bibliothèque JavaScript jQuery pour implémenter la fonction de panier
<. 🎜>Nous devons d'abord créer une page d'accueil du panier comprenant la sélection de produits, des photos de produits, des informations sur les produits, l'augmentation ou la diminution de la quantité de produits, les changements de prix, etc.
Effectuer diverses opérations sélectives sur produits, affectant ainsi les changements de prix du sous-total du produit et les changements du prix total des marchandises.
Semblable à la page de panier JavaScript précédente, nous venons de modifier ici certains styles CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现购物车功能</title>
<style>
*{margin:0px;padding:0px;border:0px; font-size:12px;color:#333; font-family:微软雅黑;}
ul li{ list-style:none}
a{ text-decoration:none;}
a:hover{ color:#e46432;}
body{margin:auto; overflow-x:hidden;}
/*****购物车*********/
.gwc{ width:96%;overflow:hidden;}
.gwc_tb1{ width:100%; border-top:5px solid #48b9e5; background:#d0e7fa; height:38px; margin-top:20px; overflow:hidden;}
.tb1_td1{ width:3%; text-align:center;}
.tb1_td3{ width:18%; text-align:center;}
.tb1_td4{ width:20%; text-align:center;}
.tb1_td5{ width:22%; text-align:center;}
.tb1_td6{ width:13%; text-align:center;}
.tb1_td7{ text-align:center;}
.gwc_tb2{ width:100%; margin-top:20px; background:#eef6ff; border:1px solid #e5e5e5; padding-top:20px; padding-bottom:20px;}
.tb2_td1{ width:6%; text-align:center;}
.tb2_td2{ width:13%; text-align:center;}
.tb2_td2 img{ width:96px; height:96px; border:2px solid #c9c6c7;}
.tb2_td3{ width:5%; text-align:center;}
.tb2_td3 a{ font-size:14px; line-height:22px;}
.gwc_tb3{ width:100%; border:1px solid #d2d2d2; background:#e7e7e7; height:46px; margin-top:20px; }
.gwc_tb3 tr td{font-size:14px;}
.tb3_td1{ width:13%; text-align:center;}
.tb3_td2{ width:100px;text-align:center;}
.tb3_td2 span{ color:#ff5500;font-size:14px; font-weight:bold; padding-left:5px; padding-right:5px; }
.tb3_td3{ width:220px;text-align:center;}
.tb3_td3 span{ font-size:18px; font-weight:bold;}
.tb3_td4{ width:110px;text-align:center;}
.jz2{ width:100px; height:46px; line-height:46px; text-align:center; font-size:18px; color:#fff; background:#ee0000; display:block; float:right;}
#jz1{font-size:18px;}
@media only screen and (min-width: 410px){
div{
margin: auto;
}
}
</style>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="js/Calculation.js"></script>
</head>
<body>
<div class="gwc" style=" margin:auto;">
<table cellpadding="0" cellspacing="0" class="gwc_tb1">
<tr>
<td class="tb1_td1"><input id="Checkbox1" type="checkbox" class="allselect"/></td>
<td class="tb1_td1">全选</td>
<td class="tb1_td3">商品</td>
<td class="tb1_td4">商品信息</td>
<td class="tb1_td5">数量</td>
<td class="tb1_td6">单价</td>
<td class="tb1_td7">操作</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="gwc_tb2" >
<tr>
<td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-1" /></td>
<td class="tb2_td2"><a href="#"><img src="https://img.php.cn/upload/course/000/000/008/581c290d2a73a781.jpg"/></a></td>
<td class="tb2_td3"><a href="#">产品标题</a></td>
<td class="tb1_td4">产品介绍</td>
<td class="tb1_td5">
<input id="min1" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
<input id="text_box1" name="" type="text" value="1" style=" width:20px; text-align:center; border:1px solid #ccc;" />
<input id="add1" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
</td>
<td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
<td class="tb1_td7"><a href="#">操作</a></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="gwc_tb2" >
<tr>
<td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-2" /></td>
<td class="tb2_td2"><a href="#"><img src="https://img.php.cn/upload/course/000/000/008/581c294ad5abd805.jpg"/></a></td>
<td class="tb2_td3"><a href="#">产品标题</a></td>
<td class="tb1_td4">产品介绍</td>
<td class="tb1_td5">
<input id="min2" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
<input id="text_box2" name="" type="text" value="1" style=" width:20px; text-align:center; border:1px solid #ccc;" />
<input id="add2" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
</td>
<td class="tb1_td6"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
<td class="tb1_td7"><a href="#">操作</a></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="gwc_tb3">
<tr>
<td class="tb1_td1"><input id="checkAll" class="allselect" type="checkbox" /></td>
<td class="tb1_td1">全选</td>
<td class="tb3_td1">
<input id="invert" type="checkbox" />反选
<input id="cancel" type="checkbox" />取消
</td>
<td class="tb3_td2">已选商品 <label id="shuliang" style="color:#ff5500;font-size:14px; font-weight:bold;">0</label> 件</td>
<td class="tb3_td3">合计(不含运费):<span>￥</span><span style=" color:#ff5500;"><label id="zong1" style="color:#ff5500;font-size:14px; font-weight:bold;">0.00</label></span></td>
<td class="tb3_td4"><span id="jz1">结算</span><a href="#" style=" display:none;" class="jz2" id="jz2">结算</a></td>
</tr>
</table>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>Une bibliothèque publique jquery externe est présentée ici.
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
a introduit le fichier JS écrit Calculation.js dans le dossier js sous le dossier local, puis a utilisé <script> pour référencer
<script type="text/javascript" src="js/Calculation.js"></script>
section suivante
