jQuery développ...LOGIN
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

jQuery développe une fonction de panier pour implémenter un code complet

Nous avons créé une page de panier simple dans le chapitre précédent

Introduit la référence à la bibliothèque jQuery externe et au fichier javascript externe

Cette section affichera entièrement le code du panier pour terminer. fonction.

Nous pouvons d'abord mettre le style CSS précédent dans un fichier index.css 

<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>

Ensuite, nous pouvons utiliser un lien pour référencer le fichier index.css dans <head> : 

<link href="css/index.css" rel="stylesheet" type="text/css" />

Le code complet de la fonction du panier est affiché ci-dessous. Ici, nous collons directement le code de style CSS pour refléter intuitivement l'effet. 

<!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>
   <script type="text/javascript">
      $(document).ready(function () {
         //jquery特效制作复选框全选反选取消(无插件)
         // 全选
         $(".allselect").click(function () {
            if(this.checked){
               $(".gwc_tb2 input[name=newslist]").prop("checked",true);
            } else{
               $(".gwc_tb2 input[name=newslist]").prop("checked",false);
               $(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" });
            }
            GetCount();
         });

         //反选
         $("#invert").click(function () {
            $(".gwc_tb2 input[name=newslist]").each(function () {
               if ($(this).prop("checked")) {
                  $(this).prop("checked", false);
                  $(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
               } else {
                  $(this).prop("checked", true);
                  $(this).next().css({ "background-color": "#3366cc", "color": "#000000" });
               }
            });
            GetCount();
         });

         //取消
         $("#cancel").click(function () {
            $(".gwc_tb2 input[name=newslist]").each(function () {
               $(this).prop("checked", false);
               $(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
            });
            GetCount();
         });

         // 所有复选(:checkbox)框点击事件
         $(".gwc_tb2 input[name=newslist]").click(function () {
            if ($(this).prop("checked")) {
               $(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" });
            } else {
               $(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
            }
         });

         // 输出
         $(".gwc_tb2 input[name=newslist]").click(function () {
            GetCount();           
         });
      });
      //获取数量
      function GetCount() {
         var conts = 0;
         var aa = 0;
         $(".gwc_tb2 input[name=newslist]").each(function () {
            if ($(this).prop("checked")) {
               for (var i = 0; i < $(this).length; i++) {
                  conts += parseInt($(this).val());
                  aa += 1;
               }
            }
         });
         $("#shuliang").text(aa);
         $("#zong1").html((conts).toFixed(2)); //toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
         $("#jz1").css("display", "none");
         $("#jz2").css("display", "block");
      }
   </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>

   <!---商品加减算总数---->
   <script type="text/javascript">
      $(function () {
         var t = $("#text_box1");
         $("#add1").click(function () {
            t.val(parseInt(t.val()) + 1);
            setTotal(); GetCount();
         });
         $("#min1").click(function () {
            if(parseInt(t.val() - 1) < 0){
               return false;
            }else {
               t.val(parseInt(t.val()) - 1);
            }
            setTotal(); GetCount();
         });
         function setTotal() {
            $("#total1").html((parseInt(t.val()) * 9).toFixed(2));
            $("#newslist-1").val(parseInt(t.val()) * 9);
         }
         setTotal();
      })
   </script>

   <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:15px; 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:15px; 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>

   <!---商品加减算总数---->
   <script type="text/javascript">
      $(function () {
         var t = $("#text_box2");
         $("#add2").click(function () {
            t.val(parseInt(t.val()) + 1);
            setTotal(); GetCount();
         });
         $("#min2").click(function () {
            if(parseInt(t.val() - 1) < 0){
               return false;
            }else {
               t.val(parseInt(t.val()) - 1);
            }
            setTotal(); GetCount();
         });
         function setTotal() {
            $("#total2").html((parseInt(t.val()) * 8).toFixed(2));
            $("#newslist-2").val(parseInt(t.val()) * 8);
         }
         setTotal();
      })
   </script>
   <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:15px; 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:15px; 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>

   <!---总数---->
   <script type="text/javascript">
      $(function () {
         $(".quanxun").click(function () {
            setTotal();
            //alert($(lens[0]).text());
         });
         function setTotal() {
            var len = $(".tot");
            var num = 0;
            for (var i = 0; i < len.length; i++) {
               num = parseInt(num) + parseInt($(len[i]).text());

            }
            //alert(len.length);
            $("#zong1").text(parseInt(num).toFixed(2));
            $("#shuliang").text(len.length);
         }
         //setTotal();
      })
   </script>
   <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>


section suivante
<!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> <script type="text/javascript"> $(document).ready(function () { //jquery特效制作复选框全选反选取消(无插件) // 全选 $(".allselect").click(function () { if(this.checked){ $(".gwc_tb2 input[name=newslist]").prop("checked",true); } else{ $(".gwc_tb2 input[name=newslist]").prop("checked",false); $(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" }); } GetCount(); }); //反选 $("#invert").click(function () { $(".gwc_tb2 input[name=newslist]").each(function () { if ($(this).prop("checked")) { $(this).prop("checked", false); $(this).next().css({ "background-color": "#ffffff", "color": "#000000" }); } else { $(this).prop("checked", true); $(this).next().css({ "background-color": "#3366cc", "color": "#000000" }); } }); GetCount(); }); //取消 $("#cancel").click(function () { $(".gwc_tb2 input[name=newslist]").each(function () { $(this).prop("checked", false); $(this).next().css({ "background-color": "#ffffff", "color": "#000000" }); }); GetCount(); }); // 所有复选(:checkbox)框点击事件 $(".gwc_tb2 input[name=newslist]").click(function () { if ($(this).prop("checked")) { $(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" }); } else { $(this).next().css({ "background-color": "#ffffff", "color": "#000000" }); } }); // 输出 $(".gwc_tb2 input[name=newslist]").click(function () { GetCount(); }); }); //获取数量 function GetCount() { var conts = 0; var aa = 0; $(".gwc_tb2 input[name=newslist]").each(function () { if ($(this).prop("checked")) { for (var i = 0; i < $(this).length; i++) { conts += parseInt($(this).val()); aa += 1; } } }); $("#shuliang").text(aa); $("#zong1").html((conts).toFixed(2)); //toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。 $("#jz1").css("display", "none"); $("#jz2").css("display", "block"); } </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> <!---商品加减算总数----> <script type="text/javascript"> $(function () { var t = $("#text_box1"); $("#add1").click(function () { t.val(parseInt(t.val()) + 1); setTotal(); GetCount(); }); $("#min1").click(function () { if(parseInt(t.val() - 1) < 0){ return false; }else { t.val(parseInt(t.val()) - 1); } setTotal(); GetCount(); }); function setTotal() { $("#total1").html((parseInt(t.val()) * 9).toFixed(2)); $("#newslist-1").val(parseInt(t.val()) * 9); } setTotal(); }) </script> <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:15px; 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:15px; 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> <!---商品加减算总数----> <script type="text/javascript"> $(function () { var t = $("#text_box2"); $("#add2").click(function () { t.val(parseInt(t.val()) + 1); setTotal(); GetCount(); }); $("#min2").click(function () { if(parseInt(t.val() - 1) < 0){ return false; }else { t.val(parseInt(t.val()) - 1); } setTotal(); GetCount(); }); function setTotal() { $("#total2").html((parseInt(t.val()) * 8).toFixed(2)); $("#newslist-2").val(parseInt(t.val()) * 8); } setTotal(); }) </script> <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:15px; 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:15px; 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> <!---总数----> <script type="text/javascript"> $(function () { $(".quanxun").click(function () { setTotal(); //alert($(lens[0]).text()); }); function setTotal() { var len = $(".tot"); var num = 0; for (var i = 0; i < len.length; i++) { num = parseInt(num) + parseInt($(len[i]).text()); } //alert(len.length); $("#zong1").text(parseInt(num).toFixed(2)); $("#shuliang").text(len.length); } //setTotal(); }) </script> <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>
soumettreRéinitialiser le code
chapitredidacticiel