JQuery_jquery に基づくショッピングモールのようなショッピングカート-jsチュートリアル-php.cn

商品情報は、同じ商品に対する

の複数のクリックをシミュレートするために使用されます。繰り返し追加されることはありませんが、数量は既存のものに基づいて 1 になります。

商品の数量も同様です。 0を入力すると、商品は買い物かごから自動的に削除されます（1未満のマイナス記号をクリックすると、商品情報を買い物かごから削除するかどうかの確認も表示されます）

各製品の価格と合計価格は、追加および削除操作に基づいて動的に計算されます

添付のダウンロード リンク: /201112/yuanma/jquery_gouwuche.rar

基本的な機能は実装されています。他のブラウザでの実行はテストされていません。 HTML コード:

コードをコピー コードは次のとおりです:

無标题文档

商品列表 编号: 000001

名前： aa

价格： 2.5

説明： aaaaa

编号: 000001

名前： aa

价格： 2.5

説明： aaaaa

编号: 000001

名前： aa

价格： 2.5

説明： aaaaa

编号: 000001

名前： aa

价格： 2.5

説明： aaaaa

购物车 連号 编号 名前 説明 数量 单价 gt; gt;总价 gt; 删除 gt; 1 000001 aa ああああ 0 0 总价 0.0 JS コード コードをコピー コードは次のとおりです。 /* @@ @@ @@ */ var product=[ {prodId:"000001",prodName:"aa",price: 2.5,説明:"aaaaa"}、 {prodId:"000002"、prodName:"bb"、価格:2.4、説明:"bbbbb"}、 {prodId:"000003"、prodName:"cc ",price:2.3,description:"ccccc"}, {prodId:"000004",prodName:"dd",price:2.2,description:"ddddd"}, {prodId:"000005", prodName:"ee",price:2.1,description:"eeeee"}, {prodId:"000006",prodName:"ff",price:2.0,description:"fffff"}, {prodId: "000007",prodName:"gg",price:1.9,description:"ggggg"}, {prodId:"000008",prodName:"hh",price:1.8,description:"hahahh"}, {prodId:"000009",prodName:"ii",price:1.7,description:"iiii"} ]; var j=0,i=-1,k=-1,len=$("#trMaster td").size();//データ和モジュールの td 都可自定，格式正确即可 $.each(product,function(index,prod){ i ; k ; if(i%len==0){ j ; CloneTR(j) ;//モジュールに基づいて来克隆行 } if(k==len) k=0; setTD(j,k,prod.prodId,prod.prodName,prod.price, prod.description);//クク隆行の td 赋值 }); //モジュールに従って克隆行 function CloneTR(id){ $("#trMaster").clone(true).css("display","block").attr("id ","tr" id).appendTo("#tblProduct"); $("#tr" id " td スパン").empty(); } //ク隆行の td 実行 function setTD(trId,index,prodId,prodName,price,description){ var tr=$("#tr" trId); $(tr).find("td:eq("index")").find("span:eq(0)").html(prodId); $(tr).find("td:eq("index")").find("span:eq(1)").html(prodName); $(tr).find("td:eq(" インデックス ")").find("span:eq(2)").html(価格); $(tr).find("td:eq("index")").find("span:eq(3)").html(説明); } var tempId=""; var num=0; //点击購入 $("input[name='btnBuy']").click(function(){ var elem=$(this).parent().parent();/ /获取点击的ボタン的td var prodId=$(elem).find("span:eq(0)").html(); var prodName=$(elem).find("span: eq(1)").html(); varprice=$(elem).find("span:eq(2)").html(); var description=$(elem).find ("span:eq(3)").html(); if(prodId==""||prodId==null||prodId==unknown){ alert("请点击その他商品" ); }else{ if(tempId.indexOf(prodId)!=-1){ if(confirm('已存在，确定数 1 吗?')){ $( "#tblOrder tr:gt(1)").each(function(){ if($(this).find("td:eq(1)").html()==prodId){ var num=$(this).find("td:eq(4)").find("input[name='txtNum']").attr("value"); $(this)。 find("td:eq(4)").find("input[name='txtNum']").attr("value", num 1);// parseInt(num) 1; に相当します。 }); } }else{ num ; CloneOrder(num,prodId,prodName,price,description); } tempId =prodId ; $("#tdTotal").html(" " GetTotalPrice().toFixed(2) ) " "); } }); //準拠订单モジュール板来clone订单 function CloneOrder(id,prodId,prodName,price,description){ $("#orderMarter").clone(true).css("display", "ブロック").attr("id","tro" id).appendTo("#tblOrder"); var tr=$("#tro" id); $(tr).find("td:eq(0)").html(num); $(tr).find("td:eq(1)").html(prodId); $(tr).find("td:eq(2)").html(prodName); $(tr).find("td:eq(3)").html(説明); $(tr).find("td:eq(4)").find("input[name='txtNum']").attr("value","1"); $(tr).find("td:eq(5)").html(価格); $(tr).find("td:eq(6)").html(" " 価格 " "); } //获取总共价格 function GetTotalPrice(){ var totalNum=0; $("#tblOrder tr:gt(1)").each(function(){ var value=parseFloat($(this).find("td:eq(6)").text( )); 合計数 }); totalNum を返します; } $(function(){ $("#tblOrder input[name='txtNum']").bind("propertychange",function(){ var value=$( this).val(); var tr=$(this).parent().parent(); if(value==0){ if('确定要删除该商品吗?')){ $(tr).remove(); } }else{ var Price=$(tr).find("td:eq(5)") .html(); var total=value*price; $(tr).find("td:eq(6)").html(" " 合計.toFixed(2) " "); $("#tdTotal").html(" " GetTotalPrice().toFixed(2) " "); } }); //加1 $("#tblOrder input[ name='btnAdd']").click(function(){ var txtBox=$(this).parent().parent().find("td:eq(4)").find("input [name='txtNum']"); var value=$(txtBox).attr("value"); value= value 1; $(txtBox).attr("value",値) }); //マイナス 1 $("#tblOrder input[name='btnCut']").click(function(){ var txtBox=$(this).parent().parent ().find("td:eq(4)").find("input[name='txtNum']"); var tr=$(this).parent().parent(); >var value=$(txtBox).attr("value"); if(value>1){ value= value-1; ) }else{ if(confirm('この商品を削除してもよろしいですか?')){ $(tr).remove(); ).html (" " GetTotalPrice().toFixed(2) " "); } } }); //削除 btnRemove $("#tblOrder input[name='btnRemove']").click(function(){ var tr=$ (this).parent().parent(); if(confirm('この商品を削除してもよろしいですか?')){ $(tr).remove(); 🎜>$("# tdTotal").html(" " GetTotalPrice().toFixed(2) " " ); } }); });

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

JQuery_jquery に基づくショッピングモールのようなショッピングカート

商品列表

购物车

連号	编号	名前	説明< /td>	数量	单价	gt;总价	删除
1	000001	aa	ああああ		0	0

JQuery_jquery に基づくショッピング モールのようなショッピング カート

商品列表

购物车

JQuery_jquery に基づくショッピングモールのようなショッピングカート