我们经常会在网上看到一些购物车,当你点击下面的物品,在购物车内会出现物品的名称,单价,数量,增减,删除......
之前我也用js写过购物车,今天用jQuery又写了一次。对比中你会发现,其实就是jquery购物车就是用底层封装好的东西去写,写起来更加的简单,提高了我们的工作效率。
购物车的基本样子,有点丑凑合看吧:
1.html代码:
<div class="block">
<table class="tablist">
<tr>
<td colspan="6">
<button id="btn">增加商品</button>
</td>
</tr>
<tr>
<td>序号</td>
<td>名称</td>
<td>单价</td>
<td>数量</td>
<td>总价</td>
<td>操作</td>
</tr>
</table>
<table class="bookinfo">
<tr>
<td title="100">c高级编程</td>
<td title="70">c++高级编程</td>
<td title="102">c#高级编程</td>
<td title="200">java高级编程</td>
<td title="250">php高级编程</td>
</tr>
<tr>
<td title="129">javascript高级编程</td>
<td title="70">jquery高级编程</td>
<td title="78">vue高级编程</td>
<td title="100">angular高级编程</td>
<td title="22">bootstrap高级详解</td>
</tr>
<tr>
<td title="100">c高级编程</td>
<td title="70">c++高级编程</td>
<td title="102">c#高级编程</td>
<td title="200">java高级编程</td>
<td title="250">php高级编程</td>
</tr>
</table>
2.css代码:造一下购物车的基本样式
<style>
.block {
position: relative;
width: 500px;
height: 500px;
background-color: #dedef8;
border: 1px solid silver;
margin: 0 auto;
}
.tablist {
width: 500px;
border-collapse: collapse;
background-color: #eefeed;
}
.tablist td {
width: 83px;
border: 1px solid silver;
text-align: center;
line-height: 30px;
white-space: nowrap;
}
.tablist td span {
display: inline-block;
width: 15px;
color: blue;
}
.tablist td input {
width: 40px;
text-align: center;
}
.bookinfo {
position: absolute;
bottom: 0;
width: 500px;
border-collapse: collapse;
display: none;
}
.bookinfo td {
border: 1px solid silver;
text-align: center;
font-size: 15px;
padding: 5px 5px;
background-color: #fff9c0;
}
#btn{
width: 497px;
padding: 5px;
background-color: #fae2f4;
/*border-color: #a78fcf;*/
/*border-radius: 10px;*/
border-style: hidden;
}
</style>
3.js代码:具体的步骤在代码中,我都有详细备注。
var num=0;
var trinfo=null;//用于存值
var isclick=true;
$(function(){
$("#btn").click(function () {
//1.点击增加商品按钮,如果isclick为true,则添加一行
if(isclick==false)return;
var str=$("<tr class='trlist'>" +
"<td class='numlst'></td>" +
"<td class='name'></td>" +
"<td class='price'></td>" +
"<td class='number'></td>" +
"<td class='tottal'></td>" +
"<td><button class='delete'>删除</button></td>" +
"</tr>");
$(".tablist").append(str);
num++;//2.定义变量,每加一行序号加1
$(".numlst").last().html(num<10?"0"+num:num);
$(".trlist").click(function(){
//3.点击trlist商品区域出现
$(".bookinfo").css("display","block");
trinfo =$(this);//存trlist对象,方便下面用对象
});
$(".delete").each(function(){
$(this).click(function(){
$(this).parents(".trlist").remove();
return false;
})
});
isclick=false;
});
//4.给行上面添加商品的单价,名称等
$(".bookinfo td").each(function(){
//点击某个商品,商品区消失,商品属性添加到行上
$(this).click(function(){
$(this).parents(".bookinfo").css("display","none");
isclick=true;
//获取商品的名称,价格
var name=$(this).html();
var price=$(this).attr("title");
//将商品名称和价格写入行中
trinfo.find(".name").html(name);
trinfo.find(".price").html(price+'¥');
trinfo.find(".tottal").html(price+'¥');
//遍历行,当行中的元素不为一,只点击name可以显示商品区
trinfo.find("td").each(function(index){
$(this).click(function(){
if(index!=1){
return false;
}
})
});
//5.如果数量区已经有文本框了则不添加,
if(!$(".number").last().html().length){
var restd=$("<span class='btnl'>-</span><input class='num' type='text' value='1'/><span class='btnr'>+</span>");
//给每个数量区域最后一个追加restd,防止错行
$(".number").last().append(restd);
//在添加按钮事件时,先清除所有事件
$(".btnl").unbind();
//点击按钮进行数量的加减
$(".btnl").click(function(){
//获取文本框的值
var num=$(this).next().val();
num--;
if(num<=0){//不能将商品个数减少至0
num=1;
}
$(this).next().val(num);//将减少后的值放入文本框
var price=parseFloat($(this).parent().prev().html());
//计算总价格
$(this).parent().next().html(num*price+"¥");
return false;
})
//跟左边“-”的方法一样
$(".btnr").unbind();
$(".btnr").click(function(){
var num=$(this).prev().val();
num++;
$(this).prev().val(num);
var price=parseFloat($(this).parent().prev().html());
$(this).parent().next().html(num*price+"¥");
return false;
})
};
//6.点击文本框,选中文本
$(".num").click(function(){
$(this).select();
return false;
}).keydown(function(e){
//规定非数字不能输入
if(isNaN(e.key)|| e.key==" ")
return false;
}).keyup(function(e){
//当按键抬起,计算总价
var n=$(this).val();
var price=parseFloat($(this).parent().prev().html());
$(this).parent().next().html(n*price+'¥');
})
});
})
})