recherche

Maison >interface Web >js tutoriel >jQuery implémente l'ajout de produits au panier et le paiement

jQuery implémente l'ajout de produits au panier et le paiement

php中世界最好的语言
php中世界最好的语言original
2018-04-19 16:20:162954parcourir

Cette fois, je vous propose jQuery pour mettre en œuvre l'ajout de produits au panier et le paiement. Quelles sont les précautions à mettre en œuvre en utilisant jQuery pour ajouter des produits au panier. et paiement. Voici la pratique réelle. Jetons un coup d'œil au cas. 

<!DOCTYPE html>
<html>
  <head>
    <metacharset="UTF-8">
    <title></title>
    <scripttype="text/javascript"src="js/jquery-1.8.3.js"></script>
    <script>
    /*删除*/
      $(function(){
  $(".blue").bind("click",function(){
    $(this).parent().parent().remove();
    totalPrice();
  });
 
  /*当鼠标离开文本框时，获取当前值，调用totalPrice()函数进行结算*/
  $(".shopping_product_list_5 input").bind("blur",function(){
    var t = $(this).val();
    totalPrice();
  });
  var allPrice = 0;
  var allReduce = 0;
  var allCount = 0;
 
  $("#myTableProduct tr").each(function(){  /*循环购物车列表的每一行*/
    var num = parseInt($(this).find(".shopping_product_list_5 input").val());  /*获取文本框中数量值*/
    var price = parseFloat($(this).find(".shopping_product_list_4 label").text()); /* 获取商品价格*/
    var total = price * num;
    allPrice += total; /*计算所有商品的总价格*/
 
    /*获取节省的金额*/
    var reduce = parseFloat($(this).find(".shopping_product_list_3 label").text()) - parseFloat($(this).find(".shopping_product_list_4 label").text());
    var reducePrice = reduce*num;
    allReduce +=reducePrice;
 
    /*获取积分*/
    var count = parseFloat($(this).find(".shopping_product_list_2 label").text());
    allCount +=count;
  });
  $("#product_total").text(allPrice.toFixed(2)); /*填写计算结果，其中利用toFixed()函数保留两位小数*/
  $("#product_save").text(allReduce.toFixed(2));
  $("#product_integral").text(allCount.toFixed(2));
});
 function totalPrice(){
  var allPrice = 0;
  var allReduce = 0;
  var allCount = 0;
  $("#myTableProduct tr").each(function(){
    var num = parseInt($(this).find(".shopping_product_list_5 input").val());
    var price = parseFloat($(this).find(".shopping_product_list_4 label").text());
    var total = price * num;
    allPrice += total;
 
    var reduce = parseFloat($(this).find(".shopping_product_list_3 label").text()) - parseFloat($(this).find(".shopping_product_list_4 label").text());
    var reducePrice = reduce*num;
    allReduce +=reducePrice;
 
    var count = parseFloat($(this).find(".shopping_product_list_2 label").text());
    allCount +=count;
  });
  $("#product_total").text(allPrice.toFixed(2));
  $("#product_save").text(allReduce.toFixed(2));
  $("#product_integral").text(allCount.toFixed(2));
 }
    </script>
  </head>
  <body>
    <pclass="shopping_list_top">您已选购以下商品</p>
  <pclass="shopping_list_border">
    <tablewidth="100%"border="1px solid #ccc">
      <trclass="shopping_list_title">
        <tdclass="shopping_list_title_1">商品名</td>
        <tdclass="shopping_list_title_2">单品积分</td>
        <tdclass="shopping_list_title_3">市场价</td>
        <tdclass="shopping_list_title_4">当当价</td>
        <tdclass="shopping_list_title_5">数量</td>
        <tdclass="shopping_list_title_6">删除</td>
      </tr>
    </table>
    <tablewidth="100%"border="1px solid #ccc"id="myTableProduct">
 
      <trclass="shopping_product_list"id="shoppingProduct_01">
        <tdclass="shopping_product_list_1"><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">私募（首部披露资本博弈秘密的金融...</a></td>
        <tdclass="shopping_product_list_2"><label>189</label></td>
        <tdclass="shopping_product_list_3">￥<label>32.00</label></td>
        <tdclass="shopping_product_list_4">￥<label>18.90 </label>(59折)</td>
        <tdclass="shopping_product_list_5"><inputtype="text"value="1"/></td>
        <tdclass="shopping_product_list_6"><ahref="javascript:void(0)"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">删除</a></td>
      </tr>
      <trclass="shopping_product_list"id="shoppingProduct_02">
        <tdclass="shopping_product_list_1"><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue"> 小团圆（张爱玲最神秘小说遗稿）</a></td>
        <tdclass="shopping_product_list_2"><label>173</label></td>
        <tdclass="shopping_product_list_3">￥<label>28.00</label></td>
        <tdclass="shopping_product_list_4">￥<label>17.30</label>(62折)</td>
        <tdclass="shopping_product_list_5"><inputtype="text"value="1"/></td>
        <tdclass="shopping_product_list_6"><ahref="javascript:void(0)"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">删除</a></td>
      </tr>
      <trclass="shopping_product_list"id="shoppingProduct_03">
        <tdclass="shopping_product_list_1"><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">不抱怨的世界(畅销全球80国的世界...</a></td>
        <tdclass="shopping_product_list_2"><label>154</label></td>
        <tdclass="shopping_product_list_3">￥<label>24.80</label></td>
        <tdclass="shopping_product_list_4">￥<label>15.40</label> (62折)</td>
        <tdclass="shopping_product_list_5"><inputtype="text"value="2"/></td>
        <tdclass="shopping_product_list_6"><ahref="javascript:void(0)"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">删除</a></td>
      </tr>
      <trclass="shopping_product_list"id="shoppingProduct_04">
        <tdclass="shopping_product_list_1"><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">福玛特双桶洗衣机XPB20-07S</a></td>
        <tdclass="shopping_product_list_2"><label>358</label></td>
        <tdclass="shopping_product_list_3">￥<label>458.00</label></td>
        <tdclass="shopping_product_list_4">￥<label>358.00</label> (78折)</td>
        <tdclass="shopping_product_list_5"><inputtype="text"value="1"/></td>
        <tdclass="shopping_product_list_6"><ahref="javascript:void(0)"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">删除</a></td>
      </tr>
      <trclass="shopping_product_list"id="shoppingProduct_05">
        <tdclass="shopping_product_list_1"><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">PHP和MySQL Web开发 （原书第4版）</a></td>
        <tdclass="shopping_product_list_2"><label>712</label></td>
        <tdclass="shopping_product_list_3">￥<label>95.00</label></td>
        <tdclass="shopping_product_list_4">￥<label>71.20</label> (75折)</td>
        <tdclass="shopping_product_list_5"><inputtype="text"value="1"/></td>
        <tdclass="shopping_product_list_6"><ahref="javascript:void(0)"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">删除</a></td>
      </tr>
      <trclass="shopping_product_list"id="shoppingProduct_06">
        <tdclass="shopping_product_list_1"><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">法布尔昆虫记</a>（再买￥68.30即可参加“满199元减10元现金”活动）</td>
        <tdclass="shopping_product_list_2"><label>10</label></td>
        <tdclass="shopping_product_list_3">￥<label>198.00</label></td>
        <tdclass="shopping_product_list_4">￥<label>130.70</label> (66折)</td>
        <tdclass="shopping_product_list_5"><inputtype="text"value="1"/></td>
        <tdclass="shopping_product_list_6"><ahref="javascript:void(0)"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"class="blue">删除</a></td>
      </tr>
    </table>
    <pclass="shopping_list_end">
      <p><aid="removeAllProduct"href="javascript:void(0);"rel="external nofollow">清空购物车</a></p>
      <ul>
        <liclass="shopping_list_end_1"><inputname=""type="image"src="images/shopping_balance.gif"/></li>
        <liclass="shopping_list_end_2">￥<labelid="product_total"></label></li>
        <liclass="shopping_list_end_3">商品金额总计：</li>
        <liclass="shopping_list_end_4">您共节省金额：￥<labelclass="shopping_list_end_yellow"id="product_save"></label><br/>
          可获商品积分：<labelclass="shopping_list_end_yellow"id="product_integral"></label>
        </li>
      </ul>
    </p>
  </p>
  </body>
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation de l'extension du plug-in jquery

Comment jQuery détermine la version du navigateur

Effet fixe de la barre supérieure de table jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery fait fonctionner la barre de navigation dans les menusArticle suivant：jQuery fait fonctionner la barre de navigation dans les menus

Articles Liés

Voir plus