欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jQuery模擬實現(xiàn)淘寶購物車模塊

 更新時間：2022年03月23日 08:50:06   作者：一夕ξ  
這篇文章主要介紹了如何利用jQuery+css+html模擬實現(xiàn)淘寶購物車模塊，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起動手嘗試一下

這是網頁版淘寶中購物車的頁面

注意給checkbox添加事件就是用change()

給button添加事件就是用click（）

1、每次點擊+號，根據文本框的值乘以當前商品的價格就是商品的小計

2、只能增加本商品的小計，就是當前商品的小計模塊

3、修改普通元素的內容是text方法

4、當前商品的價格要把￥符號去掉再相乘 截取字符串substr（）

5、parents（‘選擇器’）可以返回指定祖先元素4

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

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

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

計算總計和總額：

思路：把所有文本框里面的值相加就是總計數量，總額同理

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

點擊+號或者-號，都會改變總計和總額，如果用戶修改了文本框里面的值也會改變總額，那么都要分別添加到這三個事件中，因此封裝一個函數來求總額和總計，以上幾個操作調用即可

注意：總計是文本框中的值相加val（）?？傤~是普通元素的內容text（）

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

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 80px;
            height: 80px
        }
        
        a {
            color: black;
            text-decoration: none;
        }
        
        .mony {
            width: 20px;
            text-align: center;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
 
<body>
    <div>全部商品</div>
    <!-- 一個表單元素 -->
    <form action="">
        <table style="border-collapse: 0px;border-spacing: 0px;width:872px">
            <tr style="background-color:grey;">
                <td><input type="checkbox" class="choseall">全選</td>
                <td style="width:500px;height:40px">商品</td>
                <td>單價</td>
                <td style="width:100px">數量</td>
                <td style="width:100px">小計</td>
                <td>操作</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="goodchose"></td>
                <td>
                    <div>
                        <div style="float:left">
                            <a href="">
                                <img src="https://img.alicdn.com/bao/uploaded/i2/2904754564/O1CN011Q0OER1jaMJXxFeHl_!!2904754564.jpg_240x240.jpg" alt="">
                            </a>
                        </div>
                        <div>
                            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >【新勢力周】YUKI小樹家可愛趣味印花短款白T恤+卡扣高腰寬松復古闊腿牛仔長褲</a>
                        </div>
                    </div>
                </td>
                <td class="onemony">￥37.00</td>
                <td>
                    <input type="button" value="-" class="jian"><input type="text" class="mony" value="1"><input type="button" value="+" class="add">
                </td>
                <td class="totalmony">￥37.00</td>
                <td>刪除</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="goodchose"></td>
                <td>
                    <div>
                        <div style="float:left">
                            <a href="">
                                <img src="https://img.alicdn.com/bao/uploaded/i1/3606826698/O1CN01NPCasY1zLjTBGmAax_!!3606826698.jpg_240x240.jpg" alt="">
                            </a>
                        </div>
                        <div>
                            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >日系正肩短袖t恤女夏薄款設計感小眾日系甜酷學生小個子寬松上衣</a>
                        </div>
                    </div>
                </td>
                <td class="onemony">￥49.90</td>
                <td>
                    <input type="button" value="-" class="jian"><input type="text" class="mony" value="1"><input type="button" value="+" class="add">
                </td>
                <td class="totalmony">￥49.90</td>
                <td>刪除</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="goodchose"></td>
                <td>
                    <div>
                        <div style="float:left">
                            <a href="">
                                <img src="https://img.alicdn.com/bao/uploaded/i3/3606826698/O1CN01jfI3hB1zLjZhqP5rC_!!3606826698.jpg_240x240.jpg" alt="">
                            </a>
                        </div>
                        <div>
                            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >春秋格子襯衫外套女2022新款小個子設計感小眾寬松慵懶風日系上衣</a>
                        </div>
                    </div>
                </td>
                <td class="onemony">￥69.90</td>
                <td>
                    <input type="button" value="-" class="jian"><input type="text" class="mony" value="1"><input type="button" value="+" class="add">
                </td>
                <td class="totalmony">￥69.90</td>
                <td>刪除</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="goodchose"></td>
                <td>
                    <div>
                        <div style="float:left">
                            <a href="">
                                <img src="https://img.alicdn.com/bao/uploaded/i2/628189716/O1CN01mpRMR22Ldyv4OgUtt_!!0-item_pic.jpg_80x80.jpg" alt="">
                            </a>
                        </div>
                        <div>
                            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >滿減【百草味-紅油面皮134g】方便面盒裝速食涼皮拌泡面米粉涼皮</a>
                        </div>
                    </div>
                </td>
                <td class="onemony">￥23.70</td>
                <td>
                    <input type="button" value="-" class="jian"><input type="text" class="mony" value="1"><input type="button" value="+" class="add">
                </td>
                <td class="totalmony">￥23.70</td>
                <td>刪除</td>
            </tr>
        </table>
        <div style="position:fixed;bottom:0px;width:872px;background-color:rgb(184, 177, 177);height:50px;line-height: 50px;">
 
            <input type="checkbox" class="chosealllast">全選<span style="position:absolute;right:230px;" class="totoalgoodn">已經選0件商品</span><span style="position:absolute;right:150px;">總價：</span>
            <span style="position:absolute;left:715px;color:red;font-weight: bold;" class="totalprice">￥12.60</span>
 
 
        </div>
    </form>
    <script>
        $(function() {
            //1、全選按鈕。上下的全選按鈕效果是一樣的，按鈕狀態(tài)選中，那么所有商品的狀態(tài)為選中。點擊全選按鈕讓其不選中時，商品的選中狀態(tài)就全部取消choseall與goodchose
            $('.choseall').change(function() {
                //讓下面商品的選中狀態(tài)與全選按鈕的一致$('.choseall').prop(checked)
                $('.goodchose').prop('checked', $('.choseall').prop('checked'))
                $('.chosealllast').prop('checked', $('.choseall').prop('checked'))
                    //     //全選按鈕按下，那么商品總數就等于goodchose的數量
                    // if ($('.choseall').prop('checked') == true) {
                    //     $('.totoalgoodn').text('已經選' + $('.goodchose').length + '件商品')
                    // }
                    // //取消全選數目就等于0
                    // if ($('.choseall').prop('checked') == false) {
                    //     $('.totoalgoodn').text('已經選' + 0 + '件商品')
                    // }
                    //復制一份到下面的全選按鈕中
            })
            $('.chosealllast').change(function() {
                //讓下面商品的選中狀態(tài)與全選按鈕的一致$('.choseall').prop(checked)
                $('.goodchose').prop('checked', $('.chosealllast').prop('checked'))
                $('.choseall').prop('checked', $('.chosealllast').prop('checked'))
                    // if ($('.choseall').prop('checked') == true) {
                    //     $('.totoalgoodn').text('已經選' + $('.goodchose').length + '件商品')
                    // }
                    // //取消全選數目就等于0
                    // if ($('.choseall').prop('checked') == false) {
                    //     $('.totoalgoodn').text('已經選' + 0 + '件商品')
                    // }
            })
 
            //2、當商品的選中個數小于商品欄個數的時候，兩個全選按鈕就會取消選中element：checked  用來專門獲取復選框被選中的情況.length獲取個數
            $('.goodchose').change(function() {
                // console.log($('.goodchose:checked'))
                if ($('.goodchose:checked').length != $('.goodchose').length) {
                    $('.choseall').prop('checked', false)
                    $('.chosealllast').prop('checked', false)
 
                }
 
                //當商品的選中個數等于商品個數的時候，就相當于全選了，此時兩個全選復選框全部選中
                if ($('.goodchose:checked').length == $('.goodchose').length) {
                    $('.choseall').prop('checked', true)
                    $('.chosealllast').prop('checked', true)
                }
                // //6、更改商品總數內容
                // $('.totoalgoodn').text('已經選' + $('.goodchose:checked').length + '件商品')
                // console.log($('.goodchose:checked').length);
            })
 
            //3、修改數量為jian和add添加事件
            $('.add').click(function() {
 
                //這個商品的價格改變,siblings('')
                //是在初始值上每點擊一次就減一,但最小為一
                var b = $(this).siblings('.mony').prop('value')
                    //這個b是一個字符型
                $(this).siblings('.mony').prop('value', parseInt(b) + 1)
                    //4|
                var c = $(this).parent().siblings('.onemony').text().substr(1)
                    // console.log(c)
                    //更改小計里面的內容,顯示兩個小數.toFixed(2)
                $(this).parent().siblings('.totalmony').text('￥' + (c * (parseInt(b) + 1)).toFixed(2))
                totalnumber()
            })
            $('.jian').click(function() {
                //這個商品的價格改變,siblings('')
                //是在初始值上每點擊一次就減一,但最小為一
                var a = parseInt($(this).siblings('.mony').prop('value'))
                if (a >= 2) {
                    $(this).siblings('.mony').prop('value', a - 1)
                        //4|
                    var c = $(this).parent().siblings('.onemony').text().substr(1)
                        // console.log(c)
                        //更改小計里面的內容,顯示兩個小數.toFixed(2)
                    $(this).parent().siblings('.totalmony').text('￥' + (c * (a - 1)).toFixed(2))
                }
                totalnumber()
            })
 
            //4、實現(xiàn)小計跟隨數量變化，用數量的值*單價。單價去掉￥，得到數字,因為是跟隨數量變化的，所以這一部分添加到點擊事件中去,substr()
 
            //5、手動更改數量的時候，小計會發(fā)生改變.給mony添加change事件
            $('.mony').change(function() {
                    //獲得這里面的值賦值給一個變量
                    var number = $(this).prop('value')
                        //獲取對應的單價
                    var c = $(this).parent().siblings('.onemony').text().substr(1)
                        //要保證合格值大于等于1
                    if (number >= 1) {
                        var b = number * c
                    }
                    //當number小于1時，默認為1
                    if (number < 1) {
                        $(this).prop('value', 1)
                        number = 1
                        var b = number * c
                    }
                    // alert(number)
                    // console.log(number)
                    console.log(b)
                    $(this).parent().siblings('.totalmony').text('￥' + (b).toFixed(2))
                    totalnumber()
                })
                //6、獲得已經選擇的商品個數，就是看商品欄的狀態(tài)選擇個數,再狀態(tài)變化的事件中進行更改--不對，商品數目拿的是表單里面的數量綜合，一旦表單里面的元素值發(fā)生改變的時候，就要重新計算以下商品的數目
 
            //7、更改價格，價格的話就是小計的累加。那么就需要對小計進行遍歷，一旦小計發(fā)生改變，就需要遍歷一次去改變總價
            //函數封裝
            //總計
            function totalnumber() {
                var ton = 0
                $('.mony').each(function(index, ele) {
                    // console.log(index);
                    // console.log($('.mony').eq(index).val());直接拿ele這個元素里面的內容，不需要進行索引
                    ton = ton + parseInt($(ele).val())
                })
 
                $('.totoalgoodn').text('已經選' + ton + '件商品')
                    //總額,從小計里面獲得，去掉￥，再遍歷相加
                var mon = 0
                $('.totalmony').each(function(i, e) {
                        //首先獲取每個元素的text
 
                        mon = mon + parseInt($(e).text().substr(1))
 
                    })
                    //把mon給總價后的數值
                $('.totalprice').text('￥' + mon.toFixed(2))
            }
            totalnumber()//打開這個頁面，有默認的值存在，所以也要調用一次
        })
    </script>
</body>
 
</html>

到此這篇關于基于jQuery模擬實現(xiàn)淘寶購物車模塊的文章就介紹到這了,更多相關jQuery淘寶購物車內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • jquery小火箭返回頂部代碼分享

    jquery小火箭返回頂部代碼分享

    這篇文章主要介為大家詳細紹了jquery小火箭返回頂部特效，當用戶瀏覽到網頁的最下端時，點擊右下角的火箭可以返回到頁面最頂部，滾動效果平滑，有需要的小伙伴可以參考下。
    2015-08-08
  • jquery購物車實時結算特效實現(xiàn)思路

    jquery購物車實時結算特效實現(xiàn)思路

    購物車是可以實時結算，下面為大家解釋下通過jquery是如何實現(xiàn)的，感興趣的朋友可以了解下
    2013-09-09
  • jQuery Ajax File Upload實例源碼

    jQuery Ajax File Upload實例源碼

    這篇文章主要為大家分享了jQuery Ajax File Upload實例源碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-12-12
  • 10條建議幫助你創(chuàng)建更好的jQuery插件

    10條建議幫助你創(chuàng)建更好的jQuery插件

    這篇文章主要介紹了幫助你創(chuàng)建更好的jQuery插件的10條建議,涉及jQuery插件設計中常用的技巧,需要的朋友可以參考下
    2015-05-05
  • 20個最新的jQuery插件

    20個最新的jQuery插件

    jQuery 是一個非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，同時還有許多成熟的插件可供選擇，它可以幫助你在項目中加入一些非常好的效果
    2012-01-01
  • jQuery獲取樣式中顏色值的方法

    jQuery獲取樣式中顏色值的方法

    這篇文章主要介紹了jQuery獲取樣式中顏色值的方法,可實現(xiàn)針對IE與Chrome、Firefox等不同瀏覽器都可獲取css樣式中background-color值的功能,非常具有實用價值,需要的朋友可以參考下
    2015-01-01
  • jquery實現(xiàn)的table排序功能示例

    jquery實現(xiàn)的table排序功能示例

    這篇文章主要介紹了jquery實現(xiàn)的table排序功能,涉及基于jQuery的頁面元素屬性動態(tài)操作及鼠標事件響應相關技巧,需要的朋友可以參考下
    2017-03-03
  • jQuery事件綁定on()、bind()與delegate() 方法詳解

    jQuery事件綁定on()、bind()與delegate() 方法詳解

    這篇文章主要詳細介紹了jQuery事件綁定的三種方法，分別是on()、bind()與delegate()，十分的淺顯易懂，有需要的小伙伴可以參考下。
    2015-06-06
  • jquery dataTable 后臺加載數據并分頁實例代碼

    jquery dataTable 后臺加載數據并分頁實例代碼

    本篇文章主要介紹了jquery dataTable 后臺加載數據并分頁實例代碼，具有一定的參考價值，有興趣的可以了解一下
    2017-06-06
  • jquery超簡單實現(xiàn)手風琴效果的方法

    jquery超簡單實現(xiàn)手風琴效果的方法

    這篇文章主要介紹了jquery超簡單實現(xiàn)手風琴效果的方法,只需要幾行代碼即可實現(xiàn)手風琴效果的樣式變換功能,需要的朋友可以參考下
    2015-06-06

最新評論