jQueryはすべてのショッピングカート機能を実装します

jQueryはすべてのショッピングカート機能を実装します

今日は、全選、增減商品數量、修改商品小計、計算總計和總和、刪除商品、選中添加背景顏色、その他の一般的な機能など、ショッピングカートのいくつかの基本的な機能を実装します。

html構造のコードはすべて記事の最後にありますので、わかる人はわかるでしょう！ ！ ！

1. すべて選択

すべての分析を選択:

  • すべてのアイデアを選択: 内部の 3 つの小さなチェックボックス ボタン (j-checkbox) の選択状態 (チェック済み) は、すべて選択ボタン (checkall) に従います。
  • チェック ボックスの固有のプロパティは checked であるため、このプロパティを取得および設定するには prop() メソッドを使用する必要があります。
  • 3 つの小さなチェックボックスにすべて選択ボタンの状態を割り当てるだけです。
  • 小さなチェックボックスボタンをクリックするたびに、次のことを判断します。
  • 選択された小さなチェックボックスの数が 3 の場合、[すべて選択] ボタンが選択され、それ以外の場合は [すべて選択] ボタンは選択されません。
  • :checked セレクター:checked チェックされているフォーム要素を検索します。

以上が実現したい基本機能のデモンストレーションです。次はケーススタディに書いていきたいと思います。

// すべて選択 $(".checkall").change(function () {
        $(".j-checkbox,.checkall").prop("チェック済み", $(this).prop("チェック済み"))
    });
 
    $(".j-checkbox").change(関数() {
        ($(".j-checkbox:checked").length === $(".j-checkbox").length) の場合 {
            $(".checkall").prop("チェック済み", true);
        } それ以外 {
            $(".checkall").prop("チェック済み", false);
        }
    });

2. 商品の数量を増やすか減らす

商品の数量増減の分析：

  • 基本的な考え方: まず変数を宣言します。+ 記号 (増分) をクリックすると、値が ++ になり、テキスト ボックスに割り当てられます。
  • 注 1: この商品の数量を増やすことができるのは、現在の + 記号の兄弟テキスト ボックス (itxt) の値のみです。
  • フォームの値を変更するにはval()メソッドを使用します
  • 注 2: この変数の初期値はこのテキスト ボックスの値である必要があり、この値に基づいて ++ が追加されます。フォームの値を取得するには
  • マイナス記号（減分）の考え方は同じですが、テキストボックスの値が1の場合は減算できません。

数量を増やすにはプラス記号をクリックし、数量を減らすにはマイナス記号をクリックします。これは加算機能と減算機能の基本的な実装であり、最少大于等于一件商品。

プラス記号とマイナス記号にそれぞれクリック イベントを与え、フォーム内の値を取得し、変数を使用して増減し、内部の値を変更します。

    // 数量プラス $(".increment").click(function () {
        var n = $(this).siblings(".itxt").val();
        n++;
        $(this).siblings(".itxt").val(n);
    })
    // 数量の削減$(".decrement").click(function () {
        var n = $(this).siblings(".itxt").val();
        (n == 1)の場合{
            false を返します。
        }
        n--;
        $(this).siblings(".itxt").val(n);
    });

3. 商品の小計を変更する

製品小計分析を変更します:

  • 中心的なアイデア: + または - 記号をクリックするたびに、テキスト ボックスの値に現在の製品の価格を掛けて、製品の小計が計算されます。
  • 注 1: この製品の小計のみを増やすことができます。これは、現在の製品の小計モジュール (p-sum) です。
  • 通常の要素のコンテンツを変更するにはtext()メソッドを使用します
  • 注2: 商品の現在の価格を取得するには、￥記号を削除し、乗算して文字列substr(1)を抽出します。
  • parents('selector')は指定された祖先要素を返すことができる
  • 最終的な計算結果に小数点以下2桁を残したい場合は、toFixed(2)メソッドを使用します。
  • ユーザーはフォーム内の値を直接変更し、小計を計算することもできます。 フォーム変更イベントを使用する
  • フォーム内の最新の値に単価を掛けますが、これは現在の製品の小計のままです。

小計の値はプラスまたはマイナス記号をクリックすると変更されるため、ここでのコードはプラスまたはマイナス記号のクリックイベントに記述する必要があります。このイベントをクリックした後、単価の値を取り出し、数量の値と掛け合わせて合計価格を取得します。以下は、全体のコードの基本的な実装プロセス案です。

    // 数量プラス $(".increment").click(function () {
        var n = $(this).siblings(".itxt").val();
        n++;
        $(this).siblings(".itxt").val(n);
 
        // 商品の小計を変更します。 var p = $(this).parents(".p-num").siblings(".p-price").html();
        p = p.substr(1);
        var 価格 = (p * n).toFixed(2);
        $(this).parent().parent().siblings(".p-sum").html("￥" + 価格);
        合計を取得します。
    })
    // 数量の削減$(".decrement").click(function () {
        var n = $(this).siblings(".itxt").val();
        (n == 1)の場合{
            false を返します。
        }
        n--;
        $(this).siblings(".itxt").val(n);
        // 商品の小計を変更します。 var p = $(this).parents(".p-num").siblings(".p-price").html();
        p = p.substr(1);
        var 価格 = (p * n).toFixed(2);
        $(this).parent().parent().siblings(".p-sum").html("￥" + 価格);
        合計を取得します。
    });

4. 合計と合計額を計算する

分析の合計と合計を計算します。

  • 中心的なアイデア: すべてのテキスト ボックスの値を合計して合計数量を取得します。合計金額についても同様です
  • テキストボックス内の値は異なります。それらを合計したい場合は、それぞれのトラバーサルを使用する必要があります。変数を宣言して追加する
  • + 記号と - 記号をクリックすると、合計と金額が変更されます。ユーザーがテキスト ボックスの値を変更すると、合計と金額も変更されます。
  • したがって、合計と金額を計算する関数をカプセル化し、上記の 2 つの操作に対してこの関数を呼び出すことができます。
  • 注1: ​​合計はval()を使用したテキストボックス内の値の合計です。合計はtext()を使用した通常の要素の内容です。
  • 共通要素の内容を追加する前に、￥を削除し、デジタルタイプに変換する必要があることに注意してください。

本質的には、チェックボックスを選択すると、商品が決済列にカウントされます。ここでは、ショッピングカートの数量と小計の合計を記入します。数量が変わると小計も変わり、それに応じて決済列のデータにも影響します。

    // 決済された商品の数と価格をカプセル化します getSum();
    関数 getSum() {
        var カウント = 0;
        var お金 = 0;
        $(".itxt").each(関数(i, ele) {
            count += parseInt($(ele).val());
        });
        $(".amount-sum em").text(count);
 
        $(".p-sum").each(関数(i, ele) {
            お金 += parseFloat($(ele).text().substr(1))
        });
        $(".price-sum em").text("￥" + money.toFixed(2));
    }

5. 製品を削除する

製品モジュール分析を削除します:

  • 基本的な考え方: remove() を使用して要素を削除するだけ
  • 削除できる場所は3つあります: 1. 商品の後ろにある削除ボタン 2. 選択した商品を削除する 3. ショッピングカートをクリアする
  • 商品の後ろにある削除ボタン: 現在の商品を削除する必要があるため、$(this) から始まります。
  • 選択した製品を削除します。まず、小さなチェックボックスボタンが選択されているかどうかを確認します。選択されている場合は、対応する製品を削除します。
  • ショッピングカートをクリーンアップします。すべてのアイテムを削除します。

商品の後ろにある刪除をクリックするとその刪除選中的商品をクリックするとチェックボックスで選択した商品が削除され、清理購物車だけでショッピングカート内のすべての商品が削除されます。

    // 削除 // $(".p-action a").click(function () {の後ろの項目を削除します
        $(this).parents(".cart-item").remove();
        合計を取得します。
    });
    // 選択した製品を削除します$(".remove-batch").click(function () {
        $(".j-checkbox:checked").parents(".cart-item").remove();
        合計を取得します。
    })
    // ショッピングカートをクリアする $(".clear-all").click(function () {
        $(".cart-item").remove();
        合計を取得します。
    })

6. 選択した商品に背景を追加する

バックグラウンド分析を追加する製品を選択してください:

  • コアアイデア: 選択した製品に背景を追加し、選択されていない場合は背景を削除します
  • すべて選択ボタンのクリック: すべて選択を選択すると、すべての製品に背景が追加され、選択しない場合は背景が削除されます。
  • 小さなチェックボックスをクリックします。選択されている場合は、背景が現在の製品に追加され、選択されていない場合は背景が削除されます。
  • この背景はクラス名、クラスの追加、クラスの削除によって変更できます

背景色は選択されたときに追加されるので、チェックボックスが変更された場合にここにコードを記述する必要があります。

    // すべて選択 $(".checkall").change(function () {
        $(".j-checkbox,.checkall").prop("チェック済み", $(this).prop("チェック済み"))
        // 製品に背景色を追加します if ($(this).prop("checked")) {
            $(".cart-item").addClass("チェックカートアイテム");
        } それ以外 {
            $(".cart-item").removeClass("チェックカートアイテム");
        }
    });
 
    $(".j-checkbox").change(関数() {
        ($(".j-checkbox:checked").length === $(".j-checkbox").length) の場合 {
            $(".checkall").prop("チェック済み", true);
        } それ以外 {
            $(".checkall").prop("チェック済み", false);
        }
        // 製品に背景色を追加します if ($(this).prop("checked")) {
            $(this).parents(".cart-item").addClass("チェックカートアイテム");
        } それ以外 {
            $(this).parents(".cart-item").removeClass("チェックカートアイテム");
        }
    });

7. HTMLのすべてのコアコード

<div class="c-container">
        <div class="w">
            <div class="カートフィルターバー">
                <em>すべての製品</em>
            </div>
            <!-- ショッピングカートのメインコア領域 -->
            <div class="cart-warp">
                <!-- ヘッダー すべてのモジュールを選択 -->
                <div class="cart-thead">
                    <div class="t-checkbox">
                        <input type="checkbox" name="" id="" class="checkall"> すべて選択</div>
                    <div class="t-goods">商品</div>
                    <div class="t-price">単価</div>
                    <div class="t-num">数量</div>
                    <div class="t-sum">小計</div>
                    <div class="t-action">アクション</div>
                </div>
                <!-- 製品詳細モジュール-->
                <div class="カートアイテムリスト">
                    <div class="カートアイテムチェックカートアイテム">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" チェック済み class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p1.jpg" alt="">
                            </div>
                            <div class="p-msg">【5冊で26.8元】児童文学の古典カラーイラスト青少年版『八十日間世界一周』中学生中国語教育カリキュラム</div>
                        </div>
                        <div class="p-price">￥12.60</div>
                        <div class="p-num">
                            <div class="数量フォーム">
                                <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="decrement">-</a>
                                <入力タイプ="テキスト" クラス="itxt" 値="1">
                                <a href="javascript:;" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥12.60</div>
                        <div class="p-action"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >削除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="チェックボックス" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p2.jpg" alt="">
                            </div>
                            <div class="p-msg">[2000 ステッカー] ステッカーブック 3-6 歳 ステッカー 子供用 ステッカーブック 12 冊セット ステッカー 子供用 車</div>
                        </div>
                        <div class="p-price">￥24.80</div>
                        <div class="p-num">
                            <div class="数量フォーム">
                                <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="decrement">-</a>
                                <入力タイプ="テキスト" クラス="itxt" 値="1">
                                <a href="javascript:;" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥24.80</div>
                        <div class="p-action"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >削除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="チェックボックス" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p3.jpg" alt="">
                            </div>
                            <div class="p-msg">唐詩三百篇＋慣用句物語（全2巻）1年生課外学習図書 ハードカバー 音声表記 児童版 小学生2年生と3年生の課外学習図書</div>
                        </div>
                        <div class="p-price">￥29.80</div>
                        <div class="p-num">
                            <div class="数量フォーム">
                                <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="decrement">-</a>
                                <入力タイプ="テキスト" クラス="itxt" 値="1">
                                <a href="javascript:;" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥29.80</div>
                        <div class="p-action"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >削除</a></div>
                    </div>
                </div>
 
                <!-- 決済モジュール-->
                <div class="カートフロートバー">
                    <div class="すべて選択">
                        <input type="checkbox" name="" id="" class="checkall">すべて選択</div>
                    <div class="操作">
                        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="remove-batch"> 選択した商品を削除</a>
                        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="clear-all">ショッピングカートをクリア</a>
                    </div>
                    <div class="toolbar-right">
                        <div class="amount-sum"><em>1</em> 個のアイテムが選択されました</div>
                        <div class="price-sum">合計金額: <em>￥12.60</em></div>
                        <div class="btn-area">チェックアウトへ進む</div>
                    </div>
                </div>
            </div>
        </div>
 
    </div>

上記は、jQuery を使用してすべてのショッピング カート機能を実装する方法の例です。お役に立てば幸いです。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

以下もご興味があるかもしれません:
  • jQueryはショッピングカートの完全な機能を実現します
  • jQuery を使用したショッピングカートの実装
  • jQueryはショッピングカートの基本機能を実装します
  • jQueryはショッピングカートの合計価格計算と合計価格転送機能を実装します

<<:  CSSはボックスコンテナ（div）の高さを常に100%に設定します。

>>:  読み取り専用と無効の微妙な違いの詳細な説明

推薦する

JavaScript 改ざん防止オブジェクトの使用例

目次JavaScript 改ざん防止オブジェクト1. 拡張不可能なオブジェクト2. 封印された物体3...

我々は自らの力でIE6を絶滅に追い込んでいる

実際、IE6 が本当にいつ消滅するのか私たちは毎日疑問に思っていますが、2001 年のリリース以来、...

ウェブページのコメントにより IE でテキストがオーバーフローする

実験コードは次のとおりです。 </head> <body> <div ...

JavaScript の onblur および onfocus イベントの詳細な説明

HTML ページでは、ボタンやテキスト ボックスなどの視覚要素にフォーカスを設定したり、フォーカスを...

Ubuntu 20.04 LTS で Java 開発環境を構成する

Java開発キットjdkをダウンロードするJDK のダウンロード アドレスはhttp://www.o...

MySQLソースコマンドの使い方の紹介

目次ネット上の質問から生まれた思考MySQL ソースコマンドネット上の質問から生まれた思考今日仕事中...

MySQL ビューの原則と使用例の概要

この記事では、MySQL ビューの原理と使用法についてまとめます。ご参考までに、詳細は以下の通りです...

MySQLカバーインデックスの利点

一般的な提案は、WHERE 条件のインデックスを作成することですが、これは実際には一方的です。インデ...

Vue3のdefineComponentの役割についての簡単な説明

目次defineComponent オーバーロード関数開発実務defineComponent 関数は...

VMware ワークステーションの仮想マシンの互換性の問題に対する解決策

VMware ワークステーションの仮想マシンの互換性の問題を解決するにはどうすればよいですか?ノート...

DELL R730 サーバーの構成 RAID とインストール サーバー システムとドメイン制御の詳細なグラフィック チュートリアル

最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...

動的なテーブル効果を実現するJavaScript

この記事では、動的なテーブル効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

初心者向け入門チュートリアル: ドメイン名の解決とバインディング

では、ドメイン名を登録して仮想ホストを購入した後、IE でドメイン名を入力して Web サイトを開く...

Uniapp WeChatアプレット: キー障害の解決策

ユニアプリコード <テンプレート> <表示> <image v-for...

MySQL 5.7 の Docker バージョンを MySQL 8.0.13 にアップグレードし、データを移行する

目次1. 古いMySQL5.7データをバックアップする2. MySQL8.0.13のイメージをプルし...