收藏
批改狀態(tài)：合格
老師批語(yǔ)：
要求的提交效果
<!DOCTYPE HTML>
<html>
<head>
<title>點(diǎn)擊商品選中效果</title>
<meta charset="utf-8"/>
<link rel="icon" type="image/x-icon" href="images/2.png">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
* {margin: 0px auto;padding: 0px;}
.top {width: 402px;height: 35px;
line-height: 35px;text-align:center;
margin-top: 50px;
background: #C40000;color:#fff;
}
.main {width: 400px;height: 400px;border: 1px solid #C40000;}
p {width: 400px;height: 26px;margin-top:10px;}
b {width: 90px;height: 26px;
line-height: 26px;text-align: center;
font-size: 12px;color:#838383;
border: 1px solid #ccc;
float: left;margin-left: 5px;}
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;}
.notice{
border:0px;
}
.select{
border:2px solid #C40000;
width: 88px;
height: 24px;
line-height: 24px;
color: red;
}
</style>
</head>
<body>
<div class="top">請(qǐng)選擇信息后加入購(gòu)物車(chē)</div>
<div class="main">
<p class="item" name="version">
<b class="notice">版本</b>
<span>ONE A2001</span>
<span>ONE A0001</span>
<span>ONE A1001</span>
</p>
<p class="item" name="color">
<b class="notice">機(jī)身顏色</b>
<span>白色</span>
<span>黑色</span>
<span>金色</span>
</p>
<p class="item" name="type">
<b class="notice">套餐類型</b>
<span>標(biāo)配</span>
<span>套餐一</span>
<span>套餐二</span>
</p>
<p class="item" name="ram">
<b class="notice">運(yùn)行內(nèi)存</b>
<span>2GB</span>
<span>3GB</span>
<span>4GB</span>
</p>
<p class="item" name="rom">
<b class="notice">機(jī)身內(nèi)存</b>
<span>16GB</span>
<span>32GB</span>
<span>64GB</span>
</p>
<p class="item" name="location">
<b class="notice">產(chǎn)地</b>
<span>中國(guó)大陸</span>
<span>港澳臺(tái)</span>
</p>
<p class="item" name="price">
<b class="notice">價(jià)格</b>
<span>999元搶購(gòu)</span>
</p>
<p class="item1" name="num">
<b class="notice">數(shù)量</b>
<input type="number" value="1" style="width:40px;height:26px;">
</p>
<p style="margin-top:30px;margin-left:95px;">
<button class="bu1" id='sub'>加入購(gòu)物車(chē)</button>
</p>
</div>
<script>
$(function() {
$('span').click(function(){
if($(this).hasClass('select')){// 匹配span中是否帶有class為select
$(this).removeClass('select')//含有就清除
}else{
// 沒(méi)有就添加上select的class名，同時(shí)匹配同級(jí)span，清除同級(jí)其他span中的選中樣式
$(this).addClass('select').siblings('span').removeClass('select')
}
})
// 驗(yàn)證提交數(shù)據(jù)
$('#sub').click(function(){
let form ={}; //創(chuàng)建一個(gè)對(duì)象 用來(lái)存儲(chǔ)提交數(shù)據(jù)
let flag = true;
// each匹配每一個(gè)元素 判斷下列選擇項(xiàng)目 不為0
$('.item').each(function(){
if($(this).children('span.select').length!=1){
// alert('請(qǐng)選擇配置!');
flag =false;
}else{
let key = $(this).attr('name');
let value = $(this).children('span.select').html();
form[key] =value
};
});
if($('.item1 input').val()<=0){
alert('請(qǐng)輸入你要***的數(shù)量');
flag=false;
}else{
form['num'] = $('.item1 input').val();
//flag =true;//默認(rèn)是true 不用寫(xiě)
console.log(form);
};
if(flag){
alert('可以加入購(gòu)物車(chē)了');
};
});
});
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
購(gòu)物車(chē)案例總結(jié)：
1.對(duì)象的創(chuàng)建 var form={ } ， 鍵值的對(duì)應(yīng)關(guān)系 form[key] = value
2.選擇器 $('span.select') : 選擇span 并且下面帶有class為 select的元素
$('.item input') : 選擇class為iteam下 input元素
3.方法 hasClass（'select'）元素中是否包含 有class select的 返回布爾值
addClass（'selcet'）給元素添加 class select
removeClass('select') 移除元素上的class select
siblings('span') 匹配同級(jí)兄弟元素
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)