JS加入购物车（时间：2019.01.22）

实例
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>加入购物车</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #shop {
            width: 400px;
            border: 1px solid #C40000;
            margin: 20px auto;
        }
        
        #tips {
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: #FFF;
            background: #C40000;
        }
        
        .info {
            margin-top: 10px;
            overflow: hidden;
        }
        
        .title, .op {
            width: 90px;
            height: 26px;
            color: #838383;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            line-height: 26px;
            display: block;
            float: left;
            margin: 0 2px;
        }
        
        .op {
            font-weight: normal;
            border: 1px solid #CCC;
        }
        
        .op:hover, #btn:hover {
            cursor: pointer;
        }
        
        .select {
            width: 88px;
            height: 24px;
            line-height: 24px;
            color: #C40000;
            border: 2px solid #C40000;
        }
        
        #btn {
            width: 120px;
            height: 35px;
            color: #FFF;
            text-align: center;
            line-height: 35px;
            background: #C40000;
            margin: 20px 0 20px 96px;
        }
    </style>
</head>
<body>
<div id = "shop">
    <div id = "tips">请选择信息后加入购物车</div>
    <div id = "content">
        <div class = "info">
            <span class = "title">版本</span>
            <span class = "op">ONE A2001</span>
            <span class = "op">ONE A0001</span>
            <span class = "op">ONE A1001</span>
        </div>
        <div class = "info">
            <span class = "title">机身颜色</span>
            <span class = "op">白色</span>
            <span class = "op">黑色</span>
            <span class = "op">金色</span>
        </div>
        <div class = "info">
            <span class = "title">套餐类型</span>
            <span class = "op">标配</span>
            <span class = "op">套餐一</span>
            <span class = "op">套餐二</span>
        </div>
        <div class = "info">
            <span class = "title">运行内存</span>
            <span class = "op">2GB</span>
            <span class = "op">4GB</span>
            <span class = "op">8GB</span>
        </div>
        <div class = "info">
            <span class = "title">机身内存</span>
            <span class = "op">16GB</span>
            <span class = "op">32GB</span>
            <span class = "op">64GB</span>
        </div>
        <div class = "info">
            <span class = "title">产地</span>
            <span class = "op">中国大陆</span>
            <span class = "op">港澳台</span>
        </div>
        <div class = "info">
            <span class = "title">价格</span>
            <span class = "op">999元抢购</span>
        </div>
        <div class = "info">
            <span class = "title">数量</span>
            <input type = "number" class = "op" min = "1" max = "10">
        </div>
        <div id = "btn">加入购物车</div>
    </div>
</div>
</body>
<script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function () {
        $('span.op').click(function () {
            if ($(this).hasClass('select')) {
                $(this).removeClass('select');
            } else {
                $(this).addClass('select').siblings(this).removeClass('select');
            }
        });
        //将用户选择的信息放入一个数组中
        $('#btn').click(function () {
            var shop = [];
            $('span.title').each(function () {
                // console.log($(this).text());
                if ($(this).text() == '数量') {
                    shop[$(this).text()] = $(this).siblings('input').val();
                } else {
                    shop[$(this).text()] = $(this).siblings('span.select').text();
                }
            });
            //如果全部选择了信息，则打印，否则，提示重新选择商品属性
            for (key in shop) {
                // console.log(shop[key]);
                if (shop[key] == '') {
                    alert('请选择所有商品属性');
                    return false;
                }
            }
            console.log(shop);
        })
    })
</script>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
相关文章
