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%に設定します。

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

推薦する

VMware Workstation Pro は Win10 ピュア バージョンのオペレーティング システムをインストールします

この記事では、VMware Workstation Pro で Win10 オペレーティング システ...

JS で配列をループする 4 つの方法のまとめ

この記事では、配列を走査する 4 つの方法を比較してまとめます。 for ループ: for (let...

Docker コンテナのネットワーク設定によく使われるコマンドの詳しい説明

基本的なネットワーク構成Docker はイメージに基づいて複数のコンテナを「開く」ことができ、各コン...

Grafana+Prometheus を使用して MySQL サービスのパフォーマンスを監視する

Prometheus (プロメテウスとも呼ばれる) 公式サイト: https://prometheu...

10分でDockerを使ったマイクロサービスのデプロイ方法を学ぶ

Docker は 2013 年のリリース以来、広く注目され、ソフトウェア業界を変える可能性を秘めてい...

ブラウザのキャッシュを防ぐために、js または css の後に ?v= バージョン番号を追加します。

コードをコピーコードは次のとおりです。 <span style="font-size...

MySQL パフォーマンス ストレス ベンチマーク ツール sysbench の使い方の紹介

目次1. sysbenchの紹介#プロジェクトダウンロードアドレス: 2. Sysbenchのインス...

Centos7 での NFS サービス構築の紹介

目次1. サーバー2. クライアント3. テストサービス1. サーバー1. YUMソースを使用してN...

Nginx は rtmp ライブ サーバーの実装コードを構築します

1. nginxソースディレクトリに新しいrtmpディレクトリを作成し、git clone http...

MySQL データベースのステートメント ワイルドカード ファジー クエリの概要

MySQL エラー: パラメータ インデックスが範囲外です (1 > パラメータ数、つまり 0...

ページングのどのページでMySQLのレコードをクエリするか

序文実際には、次のような問題に遭遇する可能性があります。特定のレコードの ID がわかっていて、その...

Raspberry Pi 4 に Ubuntu 19.10 をインストールするための詳細なチュートリアル

以前、raspbian で実行したときに opencv の一部の依存関係をパッケージ化できず、一部の...

Tomcat を使用して Centos 環境に SpringBoot WAR パッケージをデプロイする

戦争パッケージを準備する1. 既存のSpringBootプロジェクトを準備し、pomに依存関係を追加...

SQL Server コメントのショートカット キー操作

SQL Server のバッチコメントバッチ注釈Ctrl + (K, C): Ctrlキーを押しなが...

MySQL で datetime 型のデフォルト値を設定する方法

Navicat クライアントを通じてデフォルトの日時値を変更する際に問題が発生しました。データベース...