用jQuery做一个简单的购物车

最新推荐文章于 2024-03-18 23:01:18 发布

XiaoChong1998

最新推荐文章于 2024-03-18 23:01:18 发布

阅读量3.9k

点赞数 3

分类专栏： jQuery 文章标签： jQuery 购物车

本文链接：https://blog.csdn.net/qq_43473154/article/details/102871195

版权

用jQuery做一个简单的购物车

前言：

之前用的JavaScript做的，现在结合jQuery再试一下。效果虽然差不多，但是对于了解和学习jQuery选择器还有事件等可以有一个更好的了解。

(img)自行准备，部分代码优化，大佬多指教

关于循环可以用jQuery里面的each

实现功能：

将商品添加到购物车（如果购物车有相同物品则累加对应数量）
小计计算与总和
积分计算与总和
实现数量的增加和减少（并同步小计和积分及其总和）
单个商品删除
批量删除

实现效果：

在这里插入图片描述

CSS代码：

#info-table{
   text-align: center;}
#info-input{
   width: 1200px;margin: 0px auto;}
#info-input>div{
   
	width: 1200px;
	margin: 20px 0px;
}
.shopCount{
   color: orange;}
a{
   text-decoration: none;color: deepskyblue;}
#resultTotalMoney,#integralTotal{
   color: orange;}
.total-div{
   text-align: right;}
.btdelete{
   float: left;}
.btorinter-div{
   height: auto;overflow: auto;}
.viewIntegral{
   float: right;}
.btbuy{
   background-color: orange;color: white;border: 0px;float: right;}
#shop{
   
	width: 800px;margin: 0px auto;
	height: auto;
	overflow: auto;
}
#shop li{
   
	text-align: center;
	list-style: none;
	float: left;
	height: auto;
	overflow: auto;
	margin: 20px;
}
#shop a{
   
	display: block;
	height: auto;
	overflow: auto;
}
.price{
   color: red;}

HTML+jQuery代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery实现购物车</title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/mycart.css"/>
	<script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
    
			// 全选
			$("#allCheck").click(function(){
    
				$(".selectOne").prop("checked",$(this).prop("checked"));
			})
			
			// 单个删除
			$("#mytable").on("click",".delete",function(){
    
				if (confirm("是否将该物品移除购物车？")){
    
					$(this).parents("tr").remove();
					// 刷新总价
					allShopPriceTotal();
				}
			})
			
			// 批量删除
			$(".btdelete").on("click",function(){
    
				if (confirm("是否从购物车移除选择的所有商品？")){
    
					$(".selectOne:checked").parents("tr").remove();
					// 刷新总价
					allShopPriceTotal()

最低0.47元/天解锁文章

XiaoChong1998

关注

3
点赞
踩
35

收藏

觉得还不错? 一键收藏
0
评论
用jQuery做一个简单的购物车

用jQuery做一个简单的购物车前言：之前用的JavaScript做的，现在结合jQuery再试一下。效果虽然差不多，但是对于了解和学习jQuery选择器还有事件等可以有一个更好的了解。(img)自行准备实现功能：将商品添加到购物车（如果购物车有相同物品则累加对应数量）小计计算与总和积分计算与总和实现数量的增加和减少（并同步小计和积分及其总和）单个商品删除批量删除实现效果...
复制链接

扫一扫