jQuery複習 簡單實現購物車功能

每天記錄自己在學校學到的點點滴滴，讓每天的生活過的更加充實！加油！

註：本次案例簡單實現購物選擇的功能！

實現效果：添加部分產品，左邊為勾選框，右邊為商品和數量選擇，數量可以增加或減少，只有覆選框勾選的時候，添加產品才可以顯示所需金額，下方為商品總價格！

html代碼：

<table id="tb1">
            <tr>
                <td>勾選狀態</td>
                <td>商品名稱</td>
                <td>商品價格</td>
                <td>數量</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="a" /></td>
                <td>空調</td>
                <td class="auto-style1">2400</td>
                <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="a" /></td>
                <td>長虹電視</td>
                <td class="auto-style1">2600</td>
                <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="a" /></td>
                <td>小米3</td>
                <td class="auto-style1">2200</td>
                <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="a" /></td>
                <td>BlurAir空氣凈化器</td>
                <td class="auto-style1">5000</td>
                <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="a" /></td>
                <td>三星顯示器</td>
                <td class="auto-style1">2000</td>
                <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td>
            </tr>
        </table>
        &nbsp;<h3>總價格:<span id="spNumber"></span></h3>

Jquery代碼：

<script type="text/javascript">

            $(document).ready(function () {
                $(".sum").click(function () {    添加產品數量
                    var tdlist = $(this).next("input").val();   獲取文本框數量值
                    var number = parseInt(tdlist) + 1;  加一
                    var sum = 0;
                    $(this).next("input").val(number);
                    getSum();
                });
                $(".min").click(function () {   減少產品數量
                    var tdlist = $(this).prev("input").val();
                    if (tdlist > 0) {   數量不能為負
                        var number = parseInt(tdlist) - 1;  減一
                        $(this).prev("input").val(number);
                        getSum();
                    }
                });
                $(".a").click(function () {
                    getSum();
                })
                function getSum() {   獲取產品總金額
                    var trlist = $("#tb1").find("tr:gt(0)");
                    var sum = 0;
                    trlist.each(function () {
                        var check = $(this).find("input[type='checkbox']").prop("checked");  勾選框為true
                        if (check == true) {
                            var monery = $(this).find(".auto-style1").text(); 獲得商品單價
                            var number = $(this).find("input:text").val();    選擇商品數量
                            var s = parseInt(monery) * parseInt(number);  相乘
                            sum += s;
                        }
                        $("#spNumber").text(sum);  賦值
                    });
                }
            });
    </script>

代碼到這裡就結束啦！後邊還會再加一些功能！再接再厲！