![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
实例
<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例