JQueryでショッピングカートの追加・削除・決済機能を実装-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

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ツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7531

CakePHP チュートリアル

1379

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

inetpubフォルダーは削除できますか? Cドライブのinetpubフォルダーを簡単に削除する方法 Mar 13, 2024 pm 02:00 PM

パソコンの C ドライブに、多くのメモリを使用する inetpub フォルダーがあることがわかりました。この inetpub フォルダーは何ですか?直接削除できるのでしょうか？実際、inetpub は IIS サーバー上のフォルダーです。IIS の正式名は、Internet Information Services です。Web サイトの構築とデバッグに使用できます。不要な場合は、アンインストールできます。具体的な方法は以下のとおりです。 1. スタートメニューを右クリックし、「プログラムと機能」を選択します。 2. 開いたら、「Windows の機能の有効化または無効化」をクリックします。 3. Windows 機能リストで、II のチェックを外します。

小紅書メモを削除する方法 Mar 21, 2024 pm 08:12 PM

小紅書メモを削除するにはどうすればよいですか? メモは小紅書アプリで編集できます。ほとんどのユーザーは小紅書メモの削除方法を知りません。次に、エディターがユーザーに小紅書メモの削除方法に関する写真とテキストを提供します。チュートリアル、興味のあるユーザーが来て、それを受講してください見てください！小紅書使い方チュートリアル小紅書メモの削除方法 1. まず小紅書アプリを開いてメインページに入り、右下隅の[自分]を選択して特別エリアに入ります; 2. 次に、マイエリアで、表示されているメモページをクリックします下の図で、削除したいメモを選択します; 3. メモページに入り、右上隅の [3 つの点] をクリックします; 4. 最後に、下部に機能バーが展開され、[削除] をクリックして完了します。

WeChat でブロックされたり削除されたり、永久に追加できなくなったりする可能性があるというのは本当ですか? Apr 08, 2024 am 11:41 AM

1. まず、相手を永久にブロックして削除して永久に追加しないのは間違いで、ブロックして削除した後に相手を追加したい場合は、相手の同意だけが必要です。 2. ユーザーが誰かをブロックすると、相手はユーザーにメッセージを送信したり、ユーザーの友達サークルを表示したり、ユーザーと通話したりすることができなくなります。 3. ブロックとは、ユーザーの WeChat 連絡先リストから相手を削除することを意味するものではありません。 4. ユーザーが相手をブロックした後、ユーザーの WeChat 連絡先リストから相手を削除した場合、削除後に回復する方法はありません。 5. ユーザーが相手を再度友達として追加したい場合は、相手が同意してユーザーを再度追加する必要があります。

.000 が見つかったフォルダーは何ですか? found.000フォルダは削除できますか? Mar 13, 2024 pm 08:52 PM

コンピュータを日常的に使用していると、「found.000 ファイルが紛失または破損している」というエラーメッセージが表示されることがあります。この found.000 はどのフォルダですか?役に立たなくなったら削除してもらえますか？このファイルを知らない人が非常に多いので、found.000 フォルダーについて詳しく説明しましょう~ 1. found.000 フォルダーとは何ですか? 不正なシャットダウンによりコンピューターが部分的または完全に失われた場合、を見つけることができます。「found.000」という名前の特別なフォルダーと、その中に含まれる「.chk」拡張子を持つファイルは、システムパーティション内の指定されたディレクトリにあります。この「フォ」

Xiaohonshuのリリースを削除するにはどうすればよいですか?削除後に復元するにはどうすればよいですか? Mar 21, 2024 pm 05:10 PM

人気のソーシャル電子商取引プラットフォームとして、Xiaohongshu は日常生活やショッピング体験を共有するために多くのユーザーを魅了してきました。場合によっては、私たちが誤って不適切なコンテンツを公開してしまうことがありますが、個人的なイメージをより良く維持したり、プラットフォームの規制に準拠したりするために、適時に削除する必要があります。 1.Xiaohongshu リリースを削除するにはどうすればよいですか? 1. Xiaohonshu アカウントにログインし、個人のホームページに入ります。 2. 個人ホームページの下部で、「My Creations」オプションを見つけてクリックして入力します。 3. 「My Creations」ページでは、メモやビデオなどを含む、公開されているすべてのコンテンツを確認できます。 4. 削除する必要があるコンテンツを見つけて、右側の「...」ボタンをクリックします。 5. ポップアップメニューで、[削除] オプションを選択します。 6. 削除を確認すると、個人ホームページおよび公開ページからコンテンツが削除されます。

hiberfil.sys ファイルとは何ですか? hiberfil.sysは削除できますか? Mar 15, 2024 am 09:49 AM

最近、多くのネチズンが編集者に「hiberfil.sys ファイルとは何ですか?」と尋ねました。 hiberfil.sys は C ドライブのスペースを多く消費し、削除される可能性がありますか?エディターは、hiberfil.sys ファイルを削除できることを通知します。以下で詳細を見てみましょう。 hiberfil.sys は Windows システムの隠しファイルであり、システム休止状態ファイルでもあります。通常、C ドライブのルートディレクトリに保存され、そのサイズはシステムに搭載されているメモリのサイズと同等です。このファイルはコンピュータが休止状態になっているときに使用され、リカバリ中に以前の状態にすばやく復元できるように、現在のシステムのメモリデータが含まれています。そのサイズはメモリ容量と等しいため、より多くのハードドライブスペースを占有する可能性があります。冬休み

WeChat ファイル転送アシスタントを完全に削除する方法_WeChat ファイル転送アシスタントを終了する方法の紹介 Mar 20, 2024 pm 08:31 PM

WeChat のファイル転送アシスタントはすべてのユーザーが利用でき、何かを記録するためのメモとして使用するユーザーもいます。では、WeChat ファイル転送アシスタントを完全に削除するにはどうすればよいでしょうか?以下で詳しくご紹介していきます。 WeChat ファイル転送アシスタントを完全に削除するには? 答え: [WeChat]-[ファイル転送アシスタントを長押し]-[このチャットを削除]。具体的な手順: 1. まず WeChat ソフトウェアを開き、ホームページに入った後、[ファイル転送アシスタント] を見つけて長押しします; 2. その後、ポップアップが未読としてマークされ、チャットを上部に固定して、次のことを行いますチャットを表示しない、チャットを削除する場合は、ここで[このチャットを削除]をクリックします。

TikTokのチャット履歴を完全に削除する方法 May 07, 2024 am 11:14 AM

1. Douyin アプリを開き、インターフェイスの下部にある [メッセージ] をクリックし、削除する必要があるチャット会話エントリをクリックします。 2. 任意のチャット記録を長押しし、[複数選択]をクリックし、削除したいチャット記録にチェックを入れます。 3. 右下隅の [削除] ボタンをクリックし、ポップアップウィンドウで [削除の確認] を選択して、これらのレコードを完全に削除します。

See all articles