收藏
批改状态：合格
老师批语：
今天我们来完成购物车选中分类菜单特效。
下面是购物车商品参数的html代码：
<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">机身颜色</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="ram"> <b class="notice">运行内存</b> <span>2GB</span> <span>3GB</span> <span>4GB</span> </p> <p class="item" name="rom"> <b class="notice">机身内存</b> <span>16GB</span> <span>32GB</span> <span>64GB</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:26px;"> </p> <p style="margin-top:30px;margin-left:95px;"> <button class="bu1" id='sub'>加入购物车</button> </p> </div>
一、实现目标
实现点击商品属性，选中商品参数，每种参数只能选择一个；
实现点击加入购物车按钮，弹出提示窗口，判断参数是否被选中，判断数量不为0；
二、实现过程
通过hasClass()判断span中是否含有select，也就是是否被选中。
$('span').click(function(){
if($(this).hasClass('select')){ //hasClass判断是否含有select
$(this).removeClass('select');//如果有，就移除select
}else{
$(this).addClass('select').siblings('span').removeClass('select');
//如果没有就添加select，并在同级元素中选择时，清除同级元素的select
}
});2.，创建数组，通过each()遍历获取元素，判断select的数量。
$('#sub').click(function(){
let form = {};//创建空数组，用来存放数据
let flag = true;//用来判断是否加入购物车
$('.item').each(function(){
if($(this).children('span.select').length != 1){
alert($(this).find('.notice').html() + '不能为空');
flag = false;
}else {
let key = $(this).attr('name');
let value = $(this).children('span.select').html();
form[key] = value;
}
})
if($('.item1 input').val() <= 0){
alert('数量不能少于1');
flag = false;
}else{
form['num'] = $('.item1 input').val()
console.log(form)
};
if(flag){
alert('可以放入购物车了');
}
});3.完整代码
<!DOCTYPE HTML>
<html>
<head>
<title>点击商品选中效果</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 #f00; color:#f00;}
</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">机身颜色</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="ram">
<b class="notice">运行内存</b>
<span>2GB</span>
<span>3GB</span>
<span>4GB</span>
</p>
<p class="item" name="rom">
<b class="notice">机身内存</b>
<span>16GB</span>
<span>32GB</span>
<span>64GB</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:26px;">
</p>
<p style="margin-top:30px;margin-left:95px;">
<button class="bu1" id='sub'>加入购物车</button>
</p>
</div>
<script>
//children(),childrens(),parents(),siblings(),find()
$(function(){
//$('.item').find('span').click(function(){
//$(this).addClass('select');
//$(this).siblings('span').removeClass('select');
//})
//console.log($('.item').siblings().find('span.select').length);
$('span').click(function(){
if($(this).hasClass('select')){
$(this).removeClass('select');
}else{
$(this).addClass('select').siblings('span').removeClass('select');
}
});
$('#sub').click(function(){
let form = {};//创建空数组，用来存放数据
let flag = true;//用来判断是否加入购物车
$('.item').each(function(){
if($(this).children('span.select').length != 1){
alert($(this).find('.notice').html() + '不能为空');
flag = false;
}else {
let key = $(this).attr('name');
let value = $(this).children('span.select').html();
form[key] = value;
}
})
if($('.item1 input').val() <= 0){
alert('数量不能少于1');
flag = false;
}else{
form['num'] = $('.item1 input').val()
console.log(form)
};
if(flag){
alert('可以放入购物车了');
}
});
})
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
