您现在的位置是:首页>学习分享
jq-简单模拟购物车功能 2019-01-11 440

简单模拟购物车功能

jq+css+html

js:

    <script>
        $(function () {
            var allElections = $('.all-elections');
            var antiElections = $('.anti-elections');
            var checkbox = $('input[type="checkbox"]');
            var payfor = $('.payfor');
            var reduce = $('.reduce');
            var add = $('.add');
            console.log(allElections,antiElections,checkbox);
            // 全选
            allElections.on('click',function () {
                checkbox.prop('checked'true);
                calculatePrice();
            })
            // 反选
            antiElections.on('click',function () {
                checkbox.each(function () {
                    if($(this).attr('checked')) {
                        $(this).prop('checked'false);
                    } else {
                        $(this).prop('checked'true);
                    }
                })
                calculatePrice();
            })
            // 单选
            checkbox.on('click',function () {
                calculatePrice();
            })
            // 购买
            payfor.on('click',function () {
                if(!payfor.hasClass('not-allow')) {
                    if(confirm('是否确认购买')) {
                        alert('购买成功!');
                    }
                } else {
                    alert('请先选择商品!');
                }
            })
            // 减
            reduce.on('click',function () {
                var num = $(this).next().val()
                if(num >1) {
                    $(this).next().val(parseInt(num)-1);
                    calculatePrice()
                }
            })
            // 加
            add.on('click',function () {
                var num = $(this).prev().val()
                $(this).prev().val(parseInt(num)+1);
                calculatePrice()
            })
            // 计算总价
            function calculatePrice() {
                var allPrice = 0;
                var selections = $('input[type="checkbox"]:checked');
                var allPriceNumber = $('.total-price-number');
                selections.each(function () {
                    var price = $(this).parent().nextAll('.price').children().text();
                    var num = $(this).parent().nextAll('.num').children("input").val()
                    allPrice += parseInt(price)*parseInt(num);
                })
                allPrice = parseFloat(allPrice).toFixed(2);
                if(allPrice == 0) {
                    payfor.addClass('not-allow');
                    $('.total-price').addClass('not-price');
                } else {
                    payfor.removeClass('not-allow');
                    $('.total-price').removeClass('not-price');
                }
                allPriceNumber.text(allPrice);
            }
            calculatePrice();
        })
    </script>
html:

    <div class="form">
        <ul>
            <li>
                <span class="classification">科目</span>
                <span class="classification">价格</span>
                <span class="number">数量</span>
            </li>
            <li>
                <span class="subject"><input type="checkbox" name="chinese" value="chinese"/>语文</span>
                <span class="price"><span>39.00</span></span>
                <span class="num">
                    <button class="reduce">-</button>
                    <input type="number" value="1" min="1"/>
                    <button class="add">+</button>
                </span>
            </li>
            <li>
                <span class="subject"><input type="checkbox" name="math" value="math"/>数学</span>
                <span class="price"><span>49.00</span></span>
                <span class="num">
                    <button class="reduce">-</button>
                    <input type="number" value="1" min="1"/>
                    <button class="add">+</button>
                </span>
            </li>
            <li>
                <span class="subject"><input type="checkbox" name="english" value="english"/>英语</span>
                <span class="price"><span>59.00</span></span>
                <span class="num">
                    <button class="reduce">-</button>
                    <input type="number" value="1" min="1"/>
                    <button class="add">+</button>
                </span>
            </li>
            <li>
                <span class="subject"><input type="checkbox" name="physics" value="physics"/>物理</span>
                <span class="price"><span>69.00</span></span>
                <span class="num">
                    <button class="reduce">-</button>
                    <input type="number" value="1" min="1"/>
                    <button class="add">+</button>
                </span>
            </li>
            <li>
                <span class="subject"><input type="checkbox" name="chemistry" value="chemistry"/>化学</span>
                <span class="price"><span>79.00</span></span>
                <span class="num">
                    <button class="reduce">-</button>
                    <input type="number" value="1" min="1"/>
                    <button class="add">+</button>
                </span>
            </li>
        </ul>
        <div class="action-button">
            <input type="button" name="全选" value="全选" class="all-elections"/>
            <input type="button" name="反选" value="反选" class="anti-elections"/>
            <span class="total-price"><span class="total-price-number">00.00</span></span>
            <input type="button" name="购买" value="购买" class="payfor"/>
        </div>
    </div>
css:

    * {
        margin0;
        padding0;
    }
    .form {
        width500px;
        margin100px auto;
        border1px solid rgb(120,120,120);
    }
    ul li {
        list-stylenone;
        line-height30px;
        border-bottom1px solid rgb(120,120,120);
        padding0 10px;
    }
    li .subject input {
        margin-right4px;
    }
    li .num input {
        width50px;
        text-aligncenter;
    }
    li .num button {
        padding0 2px;
        cursorpointer;
    }
    .all-elections.anti-elections {
        padding4px 16px;
        border-radius2px;
        border0;
        outlinenone;
        cursorpointer;
        background#379be9;
        color#FFF;
    }
    .classification.subject.number.price {
        displayinline-block;
        width100px;
    }
    .action-button {
        text-alignright;
        padding10px 0;
    }
    .payfor {
        padding4px 16px;
        border-radius2px;
        border0;
        backgroundred;
        color#FFF;
        margin-right20px;
        color#FFF;
        margin-right20px;
        outlinenone;
        cursorpointer;
    }
    .not-allow {
        cursornot-allowed;
        backgroundrgb(220,220,220);
    }
    .total-price {
        margin0 10px;
    }
    .not-price {
        colorrgb(220,220,220);
    }
查看演示
文章评论
关注我们
  • 微信公众号
  • 我的微信

站点声明:

1、本网站文章部分出自互联网,如无意中侵犯了某个媒体或个人的知识产权,请来信(987354940@qq.com)告之,本网站将立即删除。

Copyright © www.zhangqingblog.com All Rights Reserved. 备案号:鄂ICP备18005731号-2