abstrait：本次實(shí)戰(zhàn)實(shí)現(xiàn)了點(diǎn)擊選中商品的功能，通過點(diǎn)擊時(shí)，為當(dāng)前標(biāo)簽添加或刪除選中類（如果選中，則取消；否則則選中）。再通過把選中的數(shù)據(jù)壓入數(shù)組，通過循環(huán)遍歷獲取選中的值，并顯示到前臺(tái)。本次實(shí)戰(zhàn)使用了es6中的let變量申明、箭頭函數(shù)、模板字符串、擴(kuò)展運(yùn)算符、解析與賦值。代碼如下：<!DOCTYPE html> <html> <head>
本次實(shí)戰(zhàn)實(shí)現(xiàn)了點(diǎn)擊選中商品的功能，通過點(diǎn)擊時(shí)，為當(dāng)前標(biāo)簽添加或刪除選中類（如果選中，則取消；否則則選中）。再通過把選中的數(shù)據(jù)壓入數(shù)組，通過循環(huán)遍歷獲取選中的值，并顯示到前臺(tái)。
本次實(shí)戰(zhàn)使用了es6中的let變量申明、箭頭函數(shù)、模板字符串、擴(kuò)展運(yùn)算符、解析與賦值。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>點(diǎn)擊選中商品效果</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標(biāo)簽
.removeClass('check'); //清空相鄰的span標(biāo)簽的選中樣式
let params=[]; //定義數(shù)組，用于存放選中的值
$(".check").each(function(key){
let [bValue,spanValue]=[$(this).siblings('b').html(),$(this).html()];//b標(biāo)簽的值和p標(biāo)簽的值
params.push(`${bValue}:${spanValue}`); //壓入數(shù)組
});
$("#contentB").html(getSelectedInner(params)); //填充選中的內(nèi)容
});
})
//通過傳進(jìn)來的參數(shù)遍歷返回字符串
getSelectedInner=(...values)=>{
let reValues="";
$.each(values,function(i){
reValues+=`${values[i]}`;
});
return reValues.replace(/,/g,"<br>"); //把所有的“，”替換為換行符
}
</script>
</head>
<body>
<div class="top">請(qǐng)選擇信息后加入購物車</div>
<div class="main">
<p>
<b>版本</b>
<span>ONE A2001</span>
<span>ONE A0001</span>
<span>ONE A1001</span>
</p>
<p>
<b>機(jī)身顏色</b>
<span>白色</span>
<span>黑色</span>
<span>金色</span>
</p>
<p>
<b>套餐類型</b>
<span>標(biāo)配</span>
<span>套餐一</span>
<span>套餐二</span>
</p>
<p>
<b>運(yùn)行內(nèi)存</b>
<span>2GB</span>
<span>3GB</span>
<span>4GB</span>
</p>
<p>
<b style="">機(jī)身內(nèi)存</b>
<span>16GB</span>
<span>32GB</span>
<span>64GB</span>
</p>
<p>
<b>產(chǎn)地</b>
<span>中國(guó)大陸</span>
<span>港澳臺(tái)</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;}
Professeur correcteur：韋小寶Temps de correction：2018-11-22 18:07:54
Résumé du professeur：嗯！寫的很不錯(cuò)哦！繼續(xù)加油吧！課后還得記得多多練習(xí)！！