abstract:本次實(shí)戰(zhàn)實(shí)現(xiàn)了點(diǎn)擊選中商品的功能,通過(guò)點(diǎn)擊時(shí),為當(dāng)前標(biāo)簽添加或刪除選中類(如果選中,則取消;否則則選中)。再通過(guò)把選中的數(shù)據(jù)壓入數(shù)組,通過(guò)循環(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)擊選中商品的功能,通過(guò)點(diǎn)擊時(shí),為當(dāng)前標(biāo)簽添加或刪除選中類(如果選中,則取消;否則則選中)。再通過(guò)把選中的數(shù)據(jù)壓入數(shù)組,通過(guò)循環(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的類,則取消;如果沒(méi)有,則添加 .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)容 }); }) //通過(guò)傳進(jìn)來(lái)的參數(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)選擇信息后加入購(gòu)物車</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;}
Correcting teacher:韋小寶Correction time:2018-11-22 18:07:54
Teacher's summary:嗯!寫(xiě)的很不錯(cuò)哦!繼續(xù)加油吧!課后還得記得多多練習(xí)??!