实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.商品类型选择效果</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="top">请选择商品类型</div>
<div class="main">
<p class="item" name="version">
<b class="notice">版本</b>
<span>iPhone8</span>
<span>iPhoneX</span>
<span>iPhoneXS</span>
</p>
<p class="item" name="color">
<b class="notice">机身颜色</b>
<span>***金</span>
<span>黑色</span>
<span>白色</span>
</p>
<p class="item" name="type">
<b class="notice">套餐类型</b>
<span>官方标配</span>
<span>套餐一</span>
<span>套餐二</span>
</p>
<p class="item" name="ROM">
<b class="notice">机身内存</b>
<span>64GB</span>
<span>128GB</span>
<span>256GB</span>
</p>
<p class="item" name="location">
<b class="notice">产地</b>
<span>中国大陆</span>
<span>港澳台</span>
</p>
<p class="item" name="price">
<b class="notice">价格</b>
<span>999元抢购</span>
</p>
<p class="item1" name="num">
<b class="notice">数量</b>
<input type="number" value="1" style="width:40px;height:24px;margin-left: 5px;">
</p>
<p style="margin-top:30px;margin-left:95px;">
<button class="btn1" id="sub">立即购物</button>
</p>
</div>
</body>
</html>
<script>
$(function(){
/*
第一步:点击span标签的时候判断
span标签class是否存在select样式
存在就true,反之false;
*/
$('span').click(function(){
if($(this).hasClass('select')){
// 如果为true证明有select,点击的时候就会移除
$(this).removeClass('select');
}else{
// 反之会添加select样式并移除同胞select样式
// (意思就是单选,如果多选则不用移除同胞的样式)
$(this).addClass('select').siblings().removeClass('select'); // 单选
//$(this).addClass('select'); // 多选
}
});
/*
第二步:点击按钮时将选择的商品类型
存入对象中
*/
$('.btn1').click(function(){
let list = {}; // 创建一个对象
let status = true;
// 遍历class为item的p标签
$('.item').each(function(){
/* 循环遍历获取到p标签下面的子元素
span标签样式为select并得到他的长度,
当长度不等于1时状态值为false,
意味着还有些类型没有被选中
*/
if( $(this).children('span.select').length != 1 ){
status = false;
}else{
/* 反之获取p标签的name值作为key,
然后获取p标签下面的子元素span标签带有select样式的值,
最后将值存入对象里
*/
let key = $(this).attr('name');
let val = $(this).children('span.select').html();
list[key] = val;
}
});
// 第三步:判断input框type为number的值是否低于1
if($('.item1').children('input').val() < 1){
status = false;
alert('商品数量至少为1');
}else{
// 反之就获取p标签子元素input框的值,将值存入对象
list['num'] = $('.item1').children('input').val();
console.log(list);
}
status === true ? alert('可以加入购物车了') : '' ;
});
});
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS:
实例
*{margin: 0 auto;padding: 0;}
.top{
width: 402px;
height: 35px;
background: #c40000;
margin-top: 20px;
text-align: center;
line-height: 35px;
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 red;
width: 88px;
height: 24px;
line-height: 24px;
color: red;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
