收藏
批改狀態(tài)：未批改
老師批語：
<!DOCTYPE html>
<html>
<head>
<title>模擬加入購物車效果</title>
<!-- <link rel="icon" type="image/x-icon" href="static/images/favicon.ico"> -->
<script type="text/javascript" src="css/jquery-3.3.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;}
.notice+input{width:60px;margin-left: 6px;text-align: center;}
.select{border: 2px solid #fff000;
width:88x;height: 24px ;
color: #ff0000;
line-height: 30px;
}
</style>
</head>
<body>
<div class="top">請選擇信息后加入購物車</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>中國大陸</span>
<span>港澳臺</span>
</p>
<p class="item" name="price">
<b class="notice">價(jià)格</b>
<span>999元搶購</span>
</p>
<p class="item1" name="num">
<b class="notice">數(shù)量</b>
<input type="number" value="1" min='1' >
</p>
<p style="margin-top:30px;margin-left:95px;">
<button class="bu1" id='sub'>加入購物車</button>
</p>
</div>
<script>
$(function(){
$('span').click(function(){//匹配當(dāng)前span中是否class帶有select
if($(this).hasClass('select')==true){
$(this).removeClass('select')
}else{
$(this).addClass('select').siblings('span').removeClass('select')//增加選中span的class select時(shí)并且刪除同級span的class select
}
})
$('#sub').click(function(){
var form={};//創(chuàng)建一個(gè)空對象，用于儲存數(shù)據(jù)；
var flag=true;//是否能不能加入購物車
$('.item').each(function(){//遍歷每個(gè)元素，規(guī)定每個(gè)元素執(zhí)行函數(shù)匹配下
if($(this).children('span.select').length!=1){
// console.log($(this).children('span.select').length)
flag=false;
}else{ //form={鍵：值}
var key=$(this).attr('name')//this是指P標(biāo)簽
var value=$(this).children('span.select').html()//取得span的內(nèi)容
form[key]=value//鍵 值
}
})
if($('.item1 input').val()<=0){
flag=false;
}else{
form['num']=$('.item1 input').val()
}
if(flag){
alert('加入購物車')
}
})
console.log(form())
})
</script>
</body>
</html>
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號