JQuery實作購物車新增刪除以及結算功能-js教程-PHP中文網

首頁

web前端

js教程

JQuery實作購物車新增刪除以及結算功能

小云云

May 15, 2018 am 11:12 AM

jquery 刪除購物車

本文主要介紹了基於JQuery的購物車添加刪除以及結算功能示例，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助到大家。

前段時間了解到購物車結算算是一個難點部分，在網上也找了一些，但是網上除了插件之外，就是一些半成品，比如一部分只有添加刪除效果，另一部分只有結算功能，很少見到整合在一起的購物車效果，因此自己寫了一個，方便大家查看
（添加效果沒有飛入，實在懶得寫動畫效果了，湊合看吧）

HTML部分

<!DOCTYPE html> 
<html> 
<head> 
   <meta charset="utf-8"> 
   <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
   <title></title> 
   <link rel="stylesheet" href="css/index.css" rel="external nofollow" > 
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
   <script src="js/index.js" type="text/javascript" charset="utf-8" async defer></script> 
</head> 
<body> 
   <p id="banner"></p> 
   <p id="container"> 
    <ul> 
      <li num="1"><img src="images/1.jpg"/><span class="things_name">2014年春季爆品A<p>$<i>10</i><span class="buy">点击购买</p></li> 
      <li num="2"><img src="images/2.jpg"/><span class="things_name">2014年春季爆品B<p>$<i>20</i><span class="buy">点击购买</p></li> 
      <li num="3"><img src="images/3.jpg"/><span class="things_name">2014年春季爆品C<p>$<i>30</i><span class="buy">点击购买</p></li> 
      <li num="4"><img src="images/4.jpg"/><span class="things_name">2014年春季爆品D<p>$<i>40</i><span class="buy">点击购买</p></li> 
    </ul> 
   </p> 
    
   <p id="carlist"> 
    <p class="car"> 
      <p> 
        <span class="carLogo"><span><img src="images/car.png"/> 
        <span class="txt">购<br />物<br />车 
      </p> 
       
    </p> 
    <p class="list"> 
      <!--此处添加动态元素--> 
      <p class="total"> 
        <span>总价：<span>0元 
      </p> 
    </p> 
   </p> 
   <script type="text/javascript"> 
    function view(){ 
          return{ 
            w:document.documentElement.clientWidth, 
            h:document.documentElement.clientHeight 
          }; 
        } 
        document.body.style.height=view().h+"px"; 
   </script> 
</body> 
</html>

登入後複製

JS部分

$(function(){ 
 var mark=0; 
 $(".car").on("click",function(){ 
   if(mark==0){ 
     $("#carlist").animate({marginRight:"0px"},500) 
     mark=1; 
   }else{ 
     $("#carlist").animate({marginRight:"-260px"},500) 
     mark=0 
   } 
 }) 
 
 
 //点击购买按钮添加至购物车 
 var buyButton=$(".buy"); 
 buyButton.on("click",BuyClick) 

 function BuyClick(){ 
   var thingsName=$(this).parents("li").find(".things_name").text(); 
   var thingsPrice=$(this).parent().find("i").text(); 
   var thingsImage=$(this).parents("li").find("img").attr("src"); 
   var kNum=$(this).parents("li").attr("num") 
   var Geshu=1; 
   $(this).off("click").text("已经添加至购物车"); 
       
   $(".list").append(&#39;<p class="select things" num=&#39;+kNum+&#39;><img src=&#39;+thingsImage+&#39;/><p class="name">&#39;+thingsName+&#39;</p><p class="price">$<i>&#39;+thingsPrice+&#39;</i></p><ul class="caozuo"><li class="zengjian"><span class="minus">-<span>1<span class="add">+</li><li class="del">删除</li></ul></p>&#39;); 
   countTotalPrice(); 
   totalGeshu(); 
    
   //点击加号添加商品个数 
    
   $(".add").off("click").on("click",function(){ 
     Geshu=parseInt($(this).parent().find("span:nth-of-type(2)").text()) 
     Geshu++ 
     $(this).parent().find("span:nth-of-type(2)").text(Geshu) 
     countTotalPrice(); 
     totalGeshu(); 
   }) 
    
   //动态生成的元素点击减号减少商品个数 
   $(".minus").off("click").on("click",function(){ 
     Geshu=parseInt($(this).parent().find("span:nth-of-type(2)").text()); 
     if(Geshu>1){ 
       Geshu--; 
       $(this).parent().find("span:nth-of-type(2)").text(Geshu) 
     }else{ 
       Geshu==1; 
     } 
     countTotalPrice(); 
     totalGeshu(); 
   }) 
    
   //删除购物车内的商品 
   var del=$(".del"); 
   del.each(function(){ 
     $(this).off("click").on("click",function(){ 
       var delName=$(this).parents(".things").find(".name").text(); 
       $(this).parents(".things").remove(); 
       countTotalPrice(); 
       totalGeshu(); 
       var oldBtn=$("#container ul li").find("span:contains("+delName+")").parents("li").find(".buy") 
       oldBtn.on("click",BuyClick).text("点击购买") 
     }) 
   }) 
 
   //计算总价函数 
   function countTotalPrice(){       
     var totalPrice=0,listThings=$(".list").find(".things"); 
     for (var i=0;i<listThings.length;i++) { 
       var this_geshu=parseInt(listThings.eq(i).find(".zengjian span:nth-of-type(2)").text()); 
       var this_price=parseInt(listThings.eq(i).find(".price i").text()); 
       totalPrice+=this_geshu*this_price; 
     } 
     $(".total span").eq(1).text(totalPrice); 
     totalGeshu(); 
   } 
    
   //购物车上的商品总数 
   function totalGeshu(){ 
     var listThings=$(".list").find(".things"); 
     if (listThings.length>0) { 
       var totalGeshu=0; 
       listThings.each(function(){ 
         var this_geshu=parseInt($(this).find(".zengjian span:nth-of-type(2)").text()); 
         totalGeshu+=this_geshu; 
       }) 
       $(".carLogo span").html(totalGeshu) 
     } else{ 
       $(".carLogo span").css("display","none") 
     } 
   } 
 } 
})

登入後複製

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7866

Java教學

1649

CakePHP 教程

1407

Laravel 教程

1301

PHP教程

1243

Related knowledge

inetpub資料夾可以刪除嗎？快速刪除C盤inetpub資料夾的方法 Mar 13, 2024 pm 02:00 PM

　　電腦C盤發現有個inetpub資料夾佔用極大的內存，這個inetpub是什麼資料夾？可以直接刪除嗎？其實inetpub是IIS服務端的一個資料夾，IIS全名為InternetInformationServices，也就網路資訊服務，是可以搭建網站、調試網站用的，如果不需要的話，可以將其卸載掉。　　具體方法如下：　　1、右鍵點選開始選單，選擇「程式與功能」。　　2、開啟後點選「啟用或關閉Windows功能」。　　3、在Windows功能清單中，取消勾選II

小紅書筆記怎麼刪除 Mar 21, 2024 pm 08:12 PM

小紅書筆記怎麼刪除?在小紅書APP中是可以編輯筆記的，多數的用戶不知道小紅書筆記如何的刪除，接下來就是小編為用戶帶來的小紅書筆記刪除方法圖文教程，有興趣的用戶快來一起看看吧！小紅書使用教學小紅書筆記怎麼刪除1、先打開小紅書APP進入到主頁面，選擇右下角【我】進入到專區;2、之後在我的專區，點擊下圖所示的筆記頁面，選擇要刪除的筆記;3、進入到筆記頁面，右上角【三個點】;4、最後下方會展開功能欄，點選【刪除】即可完成。

微信拉黑再刪除永久加不上是真的嗎 Apr 08, 2024 am 11:41 AM

1.首先，拉黑再刪除永久加不上是假的，拉黑刪除後想要再加對方，只要對方同意即可。 2.如果用戶將某人封鎖，對方將無法向用戶發送訊息、查看用戶的朋友圈、與用戶通話。 3.封鎖並不意味著將對方從用戶的微信聯絡人清單中刪除。 4.如果用戶在封鎖後又將對方從用戶的微信聯絡人清單中刪除，那麼在刪除後是沒有辦法恢復的。 5.如果用戶想再加入對方為好友，需要對方同意並重新新增使用者。

found.000是什麼資料夾？ found.000資料夾可以刪除嗎？ Mar 13, 2024 pm 08:52 PM

　　日常使用電腦的過程中，可能會收到found.000檔案遺失損壞的錯誤提示，這個found.000是什麼資料夾？如果沒有用的話，可以刪除嗎？既然有這麼多人不認識這個文件，下面小編就來跟大家仔細說說found.000文件夾吧~　　一、found.000是什麼文件夾當電腦出現因非法關機導致的文件部分或全部丟失時，可以在位於系統分割區中指定目錄下找到名為「found.000」的特殊資料夾及其內部所包含的以「.chk」為副檔名的檔案。　　這個「fo

小紅書發怎麼刪除？發布刪除怎麼恢復？ Mar 21, 2024 pm 05:10 PM

小紅書作為一個受歡迎的社群電商平台，吸引了大量用戶分享生活點滴和購物心得。有時候我們可能會不經意發布一些不合適的內容，這時候需要及時刪除，這樣可以更好地維護個人形像或遵守平台規定。一、小紅書發布怎麼刪除？ 1.登入小紅書帳號，進入個人首頁。 2.在個人主頁下方，找到「我的創作」選項，點選進入。 3.在「我的創作」頁面，你可以看到所有發布的內容，包括筆記、影片等。 4.找到需要刪除的內容，點選右側的「...」按鈕。 5.在彈出的選單中，選擇“刪除”選項。 6.確認刪除後，該條內容將從你的個人主頁和公開頁面消失

小紅書把別人評論刪了怎麼找回來？把別人留言刪了會有顯示嗎？ Mar 21, 2024 pm 10:46 PM

小紅書作為一款熱門的社群電商平台，用戶之間的互動評論是平台中不可或缺的溝通方式。有時候，我們可能會發現自己的評論被其他人刪除，這種情況可能會讓我們感到困惑。一、小紅書把別人評論刪了怎麼找回來？當發現自己的評論被刪除時，首先可以嘗試在平台上直接搜尋相關的貼文或商品，查看是否還能找到該評論。如果評論被刪除後仍然顯示，那麼可能是被原帖主刪除的，這時候可以嘗試聯絡原帖主，詢問其刪除評論的原因，並要求恢復評論。如果評論已經被完全刪除且無法在原始貼文上找到，那麼在平台上恢復評論的機會相對較小。可以嘗試使用其他途徑

抖音聊天記錄怎麼徹底消除乾淨 May 07, 2024 am 11:14 AM

1.開啟抖音app，點選介面底部的【訊息】，點選需要刪除的聊天對話入口。 2.長按任一聊天記錄，點選【多選】，勾選想要刪除的聊天記錄。 3.點選右下角的【刪除】按鈕，在彈出的視窗中選擇【確認刪除】即可將這些記錄永久刪除。

微信檔案傳輸助手怎麼徹底刪除_微信檔案傳輸助手關閉方法介紹 Mar 20, 2024 pm 08:31 PM

微信的文件傳輸助手是每個用戶都有的，有些用戶將它當做成了備忘錄，會記錄一些東西。那麼微信檔案傳輸助手要怎麼徹底刪除呢？下面就讓小編為大家詳細介紹一下吧。微信檔案傳輸助手怎麼徹底刪除答案：【微信】-【長按檔案傳輸助手】-【刪除該聊天】。具體步驟：1、先開啟微信軟體，進入到首頁後我們找到【檔案傳輸助理】長按；2、然後會彈出標為未讀、置頂該聊天、不顯示該聊天、刪除該聊天，在這裡我們點選【刪除該聊天】即可；

See all articles

JQuery實作購物車新增刪除以及結算功能

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題