<!DOCTYPE html>
<html>
<head>
<title>模拟加入购物车效果</title>
<!-- <link rel="icon" type="image/x-icon" href="jquery_study/images/favicon.ico"> -->
<script type="text/javascript" src="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 red;
width: 88px;height: 24px;
color: red;
line-height: 24px;
}
</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" >
</p>
<p style="margin-top:30px;margin-left:95px;">
<button class="bu1" id='sub'>加入购物车</button>
</p>
</div>
<script>
//点击span,会有一个边框效果,再点击就消失,并且不能同时在一行中存在两个以上;
$(function(){
$('span').click(function(){
//给元素添加一个自定义属性;hasClass() 方法检查被选元素是否包含指定的 class。
if ($(this).hasClass('select')) { //判断当前span中是否有class为select的属性
$(this).removeClass('select')
}else{
$(this).addClass('select').siblings('span').removeClass('select')
}
})
//点击加入购物车
$('#sub').click(function(){
var form={};//空对象用于储存数据;
// var flag=true;//判断能否加入购物车;
//遍历所有class为item的;
$('.item').each(function(){
//判断当前元素下面是否存在select属性的长度不为1(也就是没选中)
if ($(this).children('span.select').length !=1) {
flag=false; //这里也可以设置为弹窗;
// alert('请选择信息')
}else{
var key=$(this).attr('name');
var value=$(this).children('span.select').html()
form[key]=value;
}
})
//限制输入数量小于0是,就无法提交;
if ($('.item1 input').val()<=0) {
// flag=false
alert('请选择数量')
}else{
form['num']=$('.item1 input').val()
console.log()
}
if (flag) {
alert('加入成功')
}
})
})
</script>
</body>
</html>
<!-- 这里没有用到window.onload,是因为页面没有要输出的文本信息; -->
<!-- 而是用读取的$(document).ready(function(){}); -->
博客列表 >jquery学习-加入购物车
jquery学习-加入购物车
- 意外的博客原创转载
- 2019年04月07日 23:04:43636浏览
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
