網站首頁編程語言正文

jQuery實現全部購物車功能實例_jquery

更新時間： 2021-11-28 編程語言

一、全選

全選分析：

全選思路：里面3個小的復選框按鈕（j-checkbox）選中狀態（checked）跟著全選按鈕（checkall）走。

因為checked 是復選框的固有屬性，此時我們需要利用prop()方法獲取和設置該屬性。

把全選按鈕狀態賦值給3小復選框就可以了。

當我們每次點擊小的復選框按鈕，就來判斷：

如果小復選框被選中的個數等于3 就應該把全選按鈕選上，否則全選按鈕不選。

:checked 選擇器 :checked 查找被選中的表單元素。

?以上是我們要實現的一個基本功能展示，接下來進入案例中來寫一寫。

// 全選
    $(".checkall").change(function () {
        $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"))
    });
 
    $(".j-checkbox").change(function () {
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
    });

二、增減商品數量

增減商品數量分析：

核心思路：首先聲明一個變量，當我們點擊+號（increment），就讓這個值++，然后賦值給文本框。

注意1：只能增加本商品的數量，就是當前+號的兄弟文本框（itxt）的值。

修改表單的值是val() 方法

注意2：這個變量初始值應該是這個文本框的值，在這個值的基礎上++。要獲取表單的值

減號（decrement）思路同理，但是如果文本框的值是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();
        if (n == 1) {
            return false;
        }
        n--;
        $(this).siblings(".itxt").val(n);
    });

三、修改商品小計

修改商品小計分析：

核心思路：每次點擊+號或者-號，根據文本框的值乘以當前商品的價格就是商品的小計

注意1：只能增加本商品的小計，就是當前商品的小計模塊（p-sum）

修改普通元素的內容是text() 方法

注意2：當前商品的價格，要把￥符號去掉再相乘截取字符串 substr(1)

parents(‘選擇器') 可以返回指定祖先元素

最后計算的結果如果想要保留2位小數通過 toFixed(2) 方法

用戶也可以直接修改表單里面的值，同樣要計算小計。用表單change事件

用最新的表單內的值乘以單價即可但是還是當前商品小計

因為是點擊加減號才修改小計里面的值，所以這里的代碼要寫在加減號的點擊事件里面，當點擊這個事件以后，取出單價里面的值乘以數量里的值就可以得到總的價錢，這里就是整體代碼的基本實現過程稿了。

    // 數量 加
    $(".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 price = (p * n).toFixed(2);
        $(this).parent().parent().siblings(".p-sum").html("￥" + price);
        getSum();
    })
    // 數量 減
    $(".decrement").click(function () {
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        n--;
        $(this).siblings(".itxt").val(n);
        // 修改商品小計 
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        p = p.substr(1);
        var price = (p * n).toFixed(2);
        $(this).parent().parent().siblings(".p-sum").html("￥" + price);
        getSum();
    });

四、計算總計和總和

計算總計和總和分析：

核心思路：把所有文本框里面的值相加就是總計數量?？傤~同理

文本框里面的值不相同，如果想要相加需要用到each遍歷。聲明一個變量，相加即可

點擊+號-號，會改變總計和總額，如果用戶修改了文本框里面的值同樣會改變總計和總額

因此可以封裝一個函數求總計和總額的，以上2個操作調用這個函數即可。

注意1：總計是文本框里面的值相加用 val() 總額是普通元素的內容用text()

要注意普通元素里面的內容要去掉￥并且轉換為數字型才能相加

本質應該是選中復選框，該商品才會被統計到結算欄里，這里我寫的是購物車里面所以數量和小計的總和，所以數量以改變小計也在變，相應的也在影響著結算欄里面的數據。

    // 封裝結算商品的個數及價錢
    getSum();
    function getSum() {
        var count = 0;
        var money = 0;
        $(".itxt").each(function (i, ele) {
            count += parseInt($(ele).val());
        });
        $(".amount-sum em").text(count);
 
        $(".p-sum").each(function (i, ele) {
            money += parseFloat($(ele).text().substr(1))
        });
        $(".price-sum em").text("￥" + money.toFixed(2));
    }

五、刪除商品?

刪除商品模塊分析：

核心思路：把商品remove() 刪除元素即可

有三個地方需要刪除： 1. 商品后面的刪除按鈕 2. 刪除選中的商品 3. 清理購物車

商品后面的刪除按鈕：一定是刪除當前的商品，所以從 $(this) 出發

刪除選中的商品：先判斷小的復選框按鈕是否選中狀態，如果是選中，則刪除對應的商品

清理購物車：則是把所有的商品全部刪掉

單擊商品后面刪除就刪除此商品，點擊下面的刪除選中的商品就刪除復選框中選中的商品，單機清理購物車就刪除購物車里面所有商品。

    // 刪除
    // 商品后面的刪除
    $(".p-action a").click(function () {
        $(this).parents(".cart-item").remove();
        getSum();
    });
    // 刪除選中的商品
    $(".remove-batch").click(function () {
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    })
    // 清空購物車
    $(".clear-all").click(function () {
        $(".cart-item").remove();
        getSum();
    })

六、選中商品添加背景

選中商品添加背景分析：

核心思路：選中的商品添加背景，不選中移除背景即可

全選按鈕點擊：如果全選是選中的，則所有的商品添加背景，否則移除背景

小的復選框點擊：如果是選中狀態，則當前商品添加背景，否則移除背景

這個背景，可以通過類名修改，添加類和刪除類

是選中就添加背景顏色，所以這里的代碼應該寫在復選框改變的事件里面。

    // 全選
    $(".checkall").change(function () {
        $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"))
        // 給商品添加背景顏色
        if ($(this).prop("checked")) {
            $(".cart-item").addClass("check-cart-item");
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
    });
 
    $(".j-checkbox").change(function () {
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        // 給商品添加背景顏色
        if ($(this).prop("checked")) {
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    });

七、html 全部核心代碼

<div class="c-container">
        <div class="w">
            <div class="cart-filter-bar">
                <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="cart-item-list">
                    <div class="cart-item check-cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" checked 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="quantity-form">
                                <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"  rel="external nofollow"  class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <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"  rel="external 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"  rel="external nofollow"  rel="external nofollow" >刪除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" 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="quantity-form">
                                <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"  rel="external nofollow"  class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <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"  rel="external 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"  rel="external nofollow"  rel="external nofollow" >刪除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" 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冊 一年級課外書 精裝注音兒童版 小學生二三年級課外閱讀書籍</div>
                        </div>
                        <div class="p-price">￥29.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <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"  rel="external nofollow"  class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <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"  rel="external 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"  rel="external nofollow"  rel="external nofollow" >刪除</a></div>
                    </div>
                </div>
 
                <!-- 結算模塊 -->
                <div class="cart-floatbar">
                    <div class="select-all">
                        <input type="checkbox" name="" id="" class="checkall">全選
                    </div>
                    <div class="operation">
                        <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"  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"  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>

原文鏈接：https://blog.csdn.net/weixin_58131487/article/details/121566935

上一篇：使用Xshell連接VMware上的Linux虛擬機(圖文步
下一篇：redux工作原理講解及使用方法_React

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁編程語言正文

jQuery實現全部購物車功能實例_jquery

目錄

一、全選

二、增減商品數量

三、修改商品小計

四、計算總計和總和

五、刪除商品?

六、選中商品添加背景

七、html 全部核心代碼

相關推薦

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁 編程語言 正文

jQuery實現全部購物車功能實例_jquery

目錄

一、全選

二、增減商品數量

三、修改商品小計

四、計算總計和總和

五、刪除商品?

六、選中商品添加背景

七、html 全部核心代碼

相關推薦

網站首頁編程語言正文

三、修改商品小計

四、計算總計和總和

五、刪除商品?

六、選中商品添加背景