摘要：本次实战实现了点击选中商品的功能，通过点击时，为当前标签添加或删除选中类（如果选中，则取消；否则则选中）。再通过把选中的数据压入数组，通过循环遍历获取选中的值，并显示到前台。本次实战使用了es6中的let变量申明、箭头函数、模板字符串、扩展运算符、解析与赋值。代码如下：<!DOCTYPE html> <html> <head>
本次实战实现了点击选中商品的功能，通过点击时，为当前标签添加或删除选中类（如果选中，则取消；否则则选中）。再通过把选中的数据压入数组，通过循环遍历获取选中的值，并显示到前台。
本次实战使用了es6中的let变量申明、箭头函数、模板字符串、扩展运算符、解析与赋值。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击选中商品效果</title>
<link rel="stylesheet" href="static/css/zuoye.css" type="text/css">
<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('span').click(function(){
$(this).toggleClass('check') //如果有check的类，则取消；如果没有，则添加
.siblings('span') //获取相邻的span标签
.removeClass('check'); //清空相邻的span标签的选中样式
let params=[]; //定义数组，用于存放选中的值
$(".check").each(function(key){
let [bValue,spanValue]=[$(this).siblings('b').html(),$(this).html()];//b标签的值和p标签的值
params.push(`${bValue}:${spanValue}`); //压入数组
});
$("#contentB").html(getSelectedInner(params)); //填充选中的内容
});
})
//通过传进来的参数遍历返回字符串
getSelectedInner=(...values)=>{
let reValues="";
$.each(values,function(i){
reValues+=`${values[i]}`;
});
return reValues.replace(/,/g,"<br>"); //把所有的“，”替换为换行符
}
</script>
</head>
<body>
<div class="top">请选择信息后加入购物车</div>
<div class="main">
<p>
<b>版本</b>
<span>ONE A2001</span>
<span>ONE A0001</span>
<span>ONE A1001</span>
</p>
<p>
<b>机身颜色</b>
<span>白色</span>
<span>黑色</span>
<span>金色</span>
</p>
<p>
<b>套餐类型</b>
<span>标配</span>
<span>套餐一</span>
<span>套餐二</span>
</p>
<p>
<b>运行内存</b>
<span>2GB</span>
<span>3GB</span>
<span>4GB</span>
</p>
<p>
<b style="">机身内存</b>
<span>16GB</span>
<span>32GB</span>
<span>64GB</span>
</p>
<p>
<b>产地</b>
<span>中国大陆</span>
<span>港澳台</span>
</p>
<p style="margin-top:30px;">
<b name="selectedB">您所选商品信息如下:</b>
<b id="contentB"></b>
</p>
</div>
</body>
</html>zuoye.css
* {margin: 0px auto;padding: 0px;}
.top {width: 400px;height: 35px;line-height: 35px;text-align:center;margin-top: 50px;border: 1px solid red;border-bottom: 0px;background: #C40000;color: white;}
.main {width: 400px;height: 400px;border: 1px solid red;}
p {width: 400px;height: 26px;margin-top:10px;}
b {width: 90px;height: 26px;border:0px;line-height: 26px;text-align: center;font-size: 12px;color:#838383;display: block;float: left;margin-left: 5px;}
b[name="selectedB"]{width:120px;height: 52px;text-align: left;margin-left: 25px;float: left;}
#contentB{width: 160px;float: right;height: 90px;text-align: left;vertical-align: top;margin-right: 80px;}
span {width: 90px;height: 26px;line-height: 26px;text-align: center;font-size: 12px;color:#838383;border: 1px solid #ccc;display: block;float: left;margin-left: 5px;}
span:hover {cursor: pointer;}
button {width: 120px;height: 35px;background: #C40000;color: white;border: 0px;}
button:hover {cursor: pointer;}
.check{width: 88px;height: 24px;line-height: 24px;border: 2px solid red;color: red;}
批改老师：韦小宝批改时间：2018-11-22 18:07:54
老师总结：嗯！写的很不错哦！继续加油吧！课后还得记得多多练习！！
