JQueryで実装したショッピングカート機能(商品の増減や価格の自動計算が可能)_jquery
jquery
ショッピングカート
ショッピング カートをクリックしてアイテムを減らすか追加すると、価格が自動的に計算されます:
ショッピングカートにはそのような機能がある場合があります。つまり、ボタンをクリックすると商品の数を増減したり、商品の合計価格をリアルタイムで計算したりできます。 以下は実装方法を紹介するコード例です。もちろん、このシミュレーションによって実装されたショッピング カートは実現が困難ですが、そこからインスピレーションや関連知識を得ることができます。コードは次のとおりです。
コードをコピー コードは次のとおりです:
<頭>
<スクリプトタイプ="text/javascript"> $(関数(){
$(".add").click(function(){
var t=$(this).parent().find('input[class*=text_box]'); t.val(parseInt(t.val()) 1)
setTotal(); })
$(".min").click(function(){
var t=$(this).parent().find('input[class*=text_box]'); t.val(parseInt(t.val())-1)
If(parseInt(t.val()) t.val(0); }
setTotal(); })
関数 setTotal(){
var s=0; $("#tab td").each(function(){
s =parseInt($(this).find('input[class*=text_box]').val())
*parseFloat($(this).find('span[class*=price]').text()); });
$("#total").html(s.toFixed(2)); }
setTotal();
})
単価:1.50 |
単価:3.95 |