总结：
理解购物车原理，进一步加深jQuery选择器的使用；
理解each()方法，和数组的遍历以及出栈入栈
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>加入购物车</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<style>
*{margin: 0; padding: 0;}
ul,li,ol {list-style: none;}
.clearfix {zoom: 1;}
.clearfix::after {content: ' '; display: block; height: 0; clear: both;}
.cart {width: 500px; margin: 0 auto; border: 1px solid crimson;}
.cart h1{height: 40px; background-color:crimson; font-size: 18px; color:#fff; text-align: center; line-height: 40px;}
.cart ul {padding: 20px 0;}
.cart ul li {line-height: 38px; margin-bottom: 10px;height: 40px; font-size: 14px;}
.cart ul li em{display: block; float: left; width: 25%; text-align: center; font-style: normal;}
.cart ul li p{display: block; float: right; width: 75%;}
.cart ul li span{ display: inline-block; border: 1px solid #ddd; padding: 0 10px; cursor: pointer;}
.cart ul li.noborder span{border:none; padding-left: 0;}
.cart ul li span.selected { border: 1px solid crimson; color: crimson;}
.cart ul li button {height: 40px; padding: 0 20px; border:none; background: none; background-color: #ddd; color: #333; cursor:not-allowed; transition: 0.5s;}
.cart ul li button.allowed { color: #fff; background-color: crimson; cursor: pointer;}
</style>
</head>
<body>
<div class="cart">
<h1>选择后加入购物车</h1>
<ul class="clearfix">
<li>
<em>版本</em>
<p>
<span>ONE A2001</span>
<span>ONE A3001</span>
<span>ONE A4001</span>
</p>
</li>
<li>
<em>机身颜色</em>
<p>
<span>白色</span>
<span>黑色</span>
<span>金色</span>
</p>
</li>
<li>
<em>套餐类型</em>
<p><span>标配</span>
<span>套餐一</span>
<span>套餐二</span></p>
</li>
<li>
<em>运行内存</em>
<p><span>2GB</span>
<span>3GB</span>
<span>4GB</span></p>
</li>
<li>
<em>存储内存</em>
<p><span>16GB</span>
<span>32GB</span>
<span>64GB</span></p>
</li>
<li>
<em>产地</em>
<p><span>中国大陆</span>
<span>港澳台</span></p>
</li>
<li>
<em>价格</em>
<p>
<span>999元抢购</span>
</p>
</li>
<li class="noborder">
<em>数量</em>
<p>
<input type="number" class="number-input" value="1">
</p>
</li>
<li>
<p>
<button>加入购物车</button>
</p>
</li>
</ul>
</div>
<script>
$(document).ready(function () {
$('span').click(function(){
// 选中单元
if($(this).hasClass('selected')){
$(this).removeClass('selected');
}else {
$(this).addClass('selected').siblings('span').removeClass('selected');
}
// 购物车按钮判断
let row = $('.cart li:has(span)');
let selected = $('.selected');
let num = $('.number-input').val();
if (selected.length == row.length && num >0){
$('button').addClass('allowed');
}else{
$('button').removeClass('allowed');
}
})
$('button').click(function(){
let flag = 1;
if ($('button').hasClass('allowed')){
flag = 1;
}else{
flag = 0;
}
if (flag == 0){
return
}else{
let form = []; // 数组方式输出
$('.cart li:has(span)').each(function(i){
form[i] = $(this).find('span.selected').html();
})
let num = $('.number-input').val();
if (num > 0) {
form.push(num);
}
console.log(form);
}
})
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
