使用jQuery制作一个简易的购物车结算流程
因为今天下午时候在网上买了东西，在结算界面的时候突发奇想的也想自己动手做一个结算界面，当然了，只是一个最简易的结算界面，有商品数量的加减，有单价和小计，单个多个删除，全选和区县全选等等一些小功能，我在上大学时候用过，相信不少初学者也会用到或者有些迷惑。这是我写的第一篇原创作品，一来当做自己的成长记录以及学习笔记，二来为在这给购物车结算方面的初学者当个参考。本篇侧重对象为初学者，请大牛一笑而过。废话不多说，开始正题。
首先，给大家看看最终的成型界面：随着鼠标单击加减号，数量跟着变化，并且小计和总价也跟着随时更新变化，且当数量为0时，减号不可用。
为了大家看得方便，我把整篇源码按照顺序原封不动贴了上来，并且对应的做了较为详细的注释，在此提示要注意jQuery文件的路径是否正确，否则运行后是看不到想要的效果的。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>最简易的购物车结算流程</title>
<!--引用jQuery-->
<script src="Scripts/jquery-3.2.1.min.js"></script>
<!--<script src="jquery-1.11.0.min.js"></script>-->
<script>
$(function () {
//计算总价，编写总价方法
function totalPrice() {
var zong = ;
$(".xiaoji").each(function () {
var all = parseInt($(this).text());
zong += all;
})
$("#heji").val(zong);
}; //设置数量框不可手动填写（此处为避免不必要的操作失误）
$(".textNum").prop("disabled", true); //减号逻辑
$(".reduce").click(function () {
var num = $(this).siblings(".textNum").val(); //获取数量框里的数值
num--; //单击“-”减号时，数量递减
$(this).siblings(".textNum").val(num); //把数量变化后的新值放入数量框中
if (num <= ) {
$(this).prop("disabled", true); //当输入框内数值为0时，使“-”减号处于不可用状态。
};
var danjia = $(this).siblings(".danjia").text(); //获取单价
var xiaoji = danjia * num; //用单价乘以数量计算得到单个小计的值
$(this).siblings(".xiaoji").text(xiaoji); //把得到的小计值放入数量框中显示
totalPrice();//调用“总价”方法，使每点击减号，数量变化时，总价跟着变化
}) //加号逻辑（逻辑如同减号的逻辑差不多）
$(".add").click(function () {
var num = $(this).siblings(".textNum").val();
num++;
$(this).siblings(".textNum").val(num);
if (num > ) {
$(this).siblings(".reduce").prop("disabled", false); //判断当输入框内数值大于0，使“-”减号处于解封可用状态。
};
var danjia = $(this).siblings(".danjia").text();
var xiaoji = danjia * num;
$(this).siblings(".xiaoji").text(xiaoji);
totalPrice();
}) //点击合计重整清算(防止单行删除某项商品后，总价不刷新)
$("#he").click(function () {
totalPrice(); //调用总价方法
}) //单行删除商品
$(".deleteOne").click(function () {
$(this).parent().remove();
}) ////全部删除商品
$("#deleteAll").click(function () {
$(".box:checked").parent().remove(); //把被选中的复选框所在的区域删除
}) //全选
$("#allSelect").click(function () {
$(".box").prop("checked", true);
}) //取消全选
$("#notSelect").click(function () {
$(".box").prop("checked", false);
}); //全部清零
$("#zero").click(function () {
$(".textNum").val();
$(".xiaoji").text();
$("#heji").val();
});
}) </script>
<style>
/*数量框字体居中*/
.textNum {
text-align: center;
} /*****/
span {
color: red;
} label {
margin-left: 20px;
}
input[value='删除'] {
color: green;
}
/*总价格颜色*/
#heji {
color: red;
font-size: 1em; /*字体大小为原来的1倍*/
}
</style> </head>
<body>
<div id="bigbox">
<div id="container" style="height:220px;width:620px;border:1px solid gray;margin:0 auto;">
<p>
<input type="checkbox" name="quanxuan" value="" class="box" />
<label>数量：</label>
<input type="button" name="name" value="-" class="reduce" />
<input type="text" name="name" value="" class="textNum" />
<input type="button" name="name" value="+" class="add" />
<label>单价：</label>
<span class="danjia"></span><strong>￥ |</strong>
<label>小计：</label>
<span class="xiaoji"></span><strong>￥</strong>
<input type="button" name="name" value="删除" class="deleteOne" />
</p>
<p>
<input type="checkbox" name="quanxuan" value="" class="box" />
<label>数量：</label>
<input type="button" name="name" value="-" class="reduce" />
<input type="text" name="name" value="" class="textNum" />
<input type="button" name="name" value="+" class="add" />
<label>单价：</label>
<span class="danjia"></span><strong>￥ |</strong>
<label>小计：</label>
<span class="xiaoji"></span><strong>￥</strong>
<input type="button" name="name" value="删除" class="deleteOne" />
</p>
<p>
<input type="checkbox" name="quanxuan" value="" class="box" />
<label>数量：</label>
<input type="button" name="name" value="-" class="reduce" />
<input type="text" name="name" value="" class="textNum" />
<input type="button" name="name" value="+" class="add" />
<label>单价：</label>
<span class="danjia"></span><strong>￥ |</strong>
<label>小计：</label>
<span class="xiaoji"></span><strong>￥</strong>
<input type="button" name="name" value="删除" class="deleteOne" />
</p>
<p>
<input type="checkbox" name="name" value="" class="box" />
<label>数量：</label>
<input type="button" name="name" value="-" class="reduce" />
<input type="text" name="name" value="" class="textNum" />
<input type="button" name="name" value="+" class="add" />
<label>单价：</label>
<span class="danjia"></span><strong>￥ |</strong>
<label>小计：</label>
<span class="xiaoji"></span><strong>￥</strong>
<input type="button" name="name" value="删除" class="deleteOne" />
</p>
<hr />
<p style="height:30px;width:470px;margin-left:60px;margin:0 auto;">
<input type="button" name="name" value="全选" id="allSelect" />
<input type="button" name="name" value="取消全选" id="notSelect" />
<input type="button" name="name" value="批量删除" id="deleteAll" />
<input type="button" name="name" value="清零" id="zero" />
<input type="button" name="name" value="合计总价" id="he" />
<input type="text" name="name" value="" id="heji" style="width:100px;" />
<strong>.￥</strong>
</p>
</div>
</div>
</body>
</html>
以上就是全部代码了，这里主要描述的是基本实现功能，样式美观什么的只做了简单的调整，有强迫症的同道可以自己去细细美化一下。本文相信会帮到一部分人的，因为我自己平时也在园子里看过很多的优质实用的文章和例子，也在困惑的时候在其中找到了一些答案，解过不少燃眉之急，所有对于这种直接或者间接的帮助，我个人还是满怀感激的。所有也希望这篇文章帮到需要的人。
收尾：其实，上述的全选和取消全选功能这两个功能可以合并成一个功能的，在这里分开写是为了大家更容易理解和掌握。本文就到此结尾了，有兴趣的朋友可以这基础之上添加和扩展更多的功能。
使用jQuery制作一个简易的购物车结算流程的更多相关文章
- 用XMLHttpRequest制作一个简易ajax
概述 jquery退出历史舞台之后,我们怎么来发送ajax请求呢?可以用相关的库,也可以自己制作一个简易的ajax. 需要说明的是,我们使用的是XMLHttpRequest 2,它几乎兼容所有主流浏览 ...
- jQuery 开发一个简易插件
jQuery 开发一个简易插件 //主要内容 $.changeCss = function(options){ var defaults = { color:'blue', ele:'text', f ...
- 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
查看本章节 查看作业目录 需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具 实现思路: 使用history对象中的 forward() 方法和 ...
- iOS:制作一个简易的计算器
初步接触视图,制作了一个简易的计算器,基本上简单的计算是没有问题的,不是很完美,可能还有一些bug,再接再厉. // // ViewController.m // 计算器 // // Created ...
- 使用Windows Form 制作一个简易资源管理器
自制一个简易资源管理器----TreeView控件 第一步.新建project,进行基本设置:(Set as StartUp Project:View/Toolbox/TreeView) 第二步.开始 ...
- Opencv探索之路（二十）：制作一个简易手动图像配准工具
近日在做基于sift特征点的图像配准时遇到匹配失败的情况,失败的原因在于两幅图像分辨率相差有点大,而且这两幅图是不同时间段的同一场景的图片,所以基于sift点的匹配已经找不到匹配点了.然后老师叫我尝试 ...
- 用jquery制作一个简单的导航栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery书写一个简易的二级联动
先用php生成一个json数组示例如下 JSON_UNESCAPED_UNICODE 是对汉字进行处理的参数 然后HTML代码如下 把那个json_city赋值成我们用php生成的json即可 < ...
- 制作一个简易计算器——基于Android Studio实现
一个计算器Android程序的源码部分分为主干和细节两部分. 一.主干 1. 主干的构成 计算器的布局 事件(即计算器上的按钮.文本框)监听 实现计算 2. 详细解释 假设我们的项目名为Calcula ...
随机推荐
- iOS 中 .a 和 .framework 静态库的创建与 .bundle 资源包的使用
iOS 中 .a 和 .framework 静态库的创建与 .bundle 资源包的使用 前言 开发中经常使用三方库去实现某特定功能,而这些三方库通常又分为开源库和闭源库.开源库可以直接拿到源码,和自 ...
- 【MySQL疑难杂症】如何将树形结构存储在数据库中（方案一、Adjacency List）
今天来看看一个比较头疼的问题,如何在数据库中存储树形结构呢? 像mysql这样的关系型数据库,比较适合存储一些类似表格的扁平化数据,但是遇到像树形结构这样有深度的人,就很难驾驭了. 举个栗子:现在有一 ...
- oracle触发器 调用 web接口
最近要求开发当数据表发生变化的时候调用web接口的需求,上网找了好几篇文章看着都觉得不是很好,也根据别人的思路去实现了下,感觉都不太理想,最后使用URLConnection实现了调用.具体查看一下代码 ...
- php常用面试题
1. 有一列数的规则如下 1.1.2.3.5.8.13.21.34... 求第30位数是多少.写出相关函数和算法名称 //$pxx = array(1,1);//for($i=2;$i<=29; ...
- 数据库索引------B-Tree 索引和 Hash 索引的对比
对于 B-tree 和 hash 数据结构的理解能够有助于预测不同存储引擎下使用不同索引的查询性能的差异,尤其是那些允许你选择 B-tree 或者 hash 索引的内存存储引擎. B-Tree 索引的 ...
- 关于AJAX使用中出现中文乱码的问题
自己初学AJAX,遇到一个棘手的bug就是xmlHttp.open("get",url,false);url里面有中文,结果出现乱码.不过最后在百度,和诸位博主的帮助下,成功解决了 ...
- CF Round#436 div2
额,这次的题目其实挺智障的.所以通过这次比赛,我也发现了自己是一个智障.... 不说太多,说多是泪... A. Fair Game 题意:给你一个数组,看你能否把它均分为两个所有元素均相同的子数组. ...
- NGUI_PopupList
八.PopuList下拉菜单 1.使用Populist的规律: (1).有一系列选项需要玩家做出选择,这些选项是有限多个的. (2).这些选项玩家必须选择一个,也只能选择一个. (3).这些选项如果全 ...
- 更便捷的css处理方式-postcss
更便捷的css处理方式-PostCSS 一般来说介绍一个东西都是要从是什么,怎么用的顺序来讲.我感觉这样很容易让大家失去兴趣,先看一下postcss能做点什么,有兴趣的话再往下看,否则可能没有耐心看下 ...
- Java----list常用方法汇总
package ListTest; import java.util.ArrayList; import java.util.Iterator ; import java.util.List; /** ...