Jquery实现功能---购物车
//需求，勾选选项时，总价格要跟着变，点击添加数量，总价格也要跟着变，全部要动态变化
//代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.jisuan{
display: inline-block;
}
.num{
display: inline-block;
width: 50px;
text-align: center;
}
</style>
</head>
<body>
<ul id="list">
<li>
<input type="checkbox" name="" class="ch" checked="checked">
<span>第一件</span>
<span class="price">199.00</span>
<div class="jisuan"><button class="mul">-</button><span class="num">1</span><button class="plus">+</button></div>
<span class="pertotle">199.00</span>
<button class="del">删除</button>
</li>
<li>
<input type="checkbox" name="" class="ch" >
<span>第二件</span>
<span class="price">299.00</span>
<div class="jisuan"><button class="mul">-</button><span class="num">1</span><button class="plus">+</button></div>
<span class="pertotle">299.00</span>
<button class="del">删除</button>
</li>
<li>
<input type="checkbox" name="" class="ch" >
<span>第三件</span>
<span class="price">99.00</span>
<div class="jisuan"><button class="mul">-</button><span class="num">1</span><button class="plus">+</button></div>
<span class="pertotle">99.00</span>
<button class="del">删除</button>
</li>
</ul>
<div class="box">
全选<input type="checkbox" class="checkAll">
<span class="delCheck">删除</span>
件数<span class="totleNum">0</span>
总价格<span class="totlePrice">0</span>
</div>
<script type="text/javascript" src="jquery.1.11.1.min.js"></script>
<script type="text/javascript">
function totle(){
// 总计数
var t1 = 0;
// 总价格
var t2 =0;
console.log(t2);
$("#list li").each(function(){
console.log(this);
if ($(this).find(".ch").prop("checked")==true) {
t1+=parseFloat($(this).find(".num").text());
t2+=parseFloat($(this).find(".pertotle").text());
}
})
$(".totleNum").text(t1);
$(".totlePrice").text(t2);
}
totle();
// 所有加号 减号 数量按钮
$("#list li .ch").click(function(){
var flag = true;
$("#list li .ch").each(function(){ //遍历每一个单选框
if($(this).prop("checked")==false){ //prop();给表单元素设置和获取属性
flag= false;
}
});
if (flag) {
$(".checkAll").prop("checked",true);
}else{
$(".checkAll").prop("checked",false);
}
totle();
});
$(".mul").click(function(){ //减号按钮被点击时，接下来要 干嘛
if ($(this).next().text()==="0") {
return;
};
var n = $(this).next().text(); //获得加好前一个文本内容，就是件数
$(this).next().text(--n);
var p = $(this).next().text()*$(this).parent().prev().text(); //p为记录每件的总价
$(this).parent().next().text(p); //每件总价的文本内容用p来填充
totle();
});
$(".plus").click(function(){ //加好按钮被点击时，接下来要 干嘛
var n = $(this).prev().text(); //获得加好前一个文本内容，就是件数
//console.log(n);
$(this).prev().text(++n);
var p = $(this).prev().text()*$(this).parent().prev().text(); //件数*单价=总价
$(this).parent().next().text(p);
totle();
});
$(".del").click(function(){ //删除按钮被点击时，接下来要干嘛
var res = confirm("del?");
if (res) {
$(this).parent().remove();
totle();
}
});
$(".checkAll").click(function(){
var $that = $(this); //$(this)指.checkAll，谁调用谁
$(".ch").each(function(){
$(this).prop("checked",$that.prop("checked")); //this指每一个单选框
});
totle();
});
$(".delCheck").click(function(){
$("li").each(function(){
if ($(this).find(".ch").prop("checked")) { //this指每一个li
$(this).remove(); //如果是出于勾选状态就要内移除
}
});
totle();
});
</script>
</body>
</html>
Jquery实现功能---购物车的更多相关文章
- 现代浏览器内置的可等效替代jQuery的功能
jQuery的体积在不断的增大.新功能要不断增加,这是必然结果.虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网 页开发,它仍然是不可接受的.当然,jQuery不是铁板一块, ...
- 基于jQuery+HTML5加入购物车代码
基于jQuery+HTML5加入购物车代码.这是一款基于jquery+html5实现的支持累加计价的网站购物车代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- MyEclipse6.0中使用aptana插件，添加jquery提示功能
MyEclipse6.0中使用aptana插件,添加jquery提示功能 第一:查看当前MyEclipse集成的eclipse的版本,, 查看路径 D:/MyEclipse 6.0/eclips ...
- jQuery实现简单购物车页面
功能描述: 当全选按钮被按下时,所有商品的小复选框(以及另外一个全选按钮)的选中状态跟按下的全选按钮保持一致: 当用户选中商品时,如果所有商品都被选中,就让全选按钮为选中状态: 用户可以点击 + - ...
- jQuery基础入门+购物车案例详解
jQuery是一个快速.简洁的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多 ...
- 【jQuery 分页】jQuery分页功能的实现
自写的jQuery实现分页功能的分页组件: 功能效果如下: 分页组件就是上图中的三部分, 分别放在表格上部 和下部 . 其中, 1>>>页面的代码如下: product.jsp 其 ...
- jQuery实现加入购物车飞入动画效果
<script src="jquery.js"></script> <script src="jquery.fly.min.js" ...
- Jquery小功能实例
下拉框内容选中左右移动 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sele ...
- 自己在项目中写的一个Jquery插件和Jquery tab 功能
后台查询结果 PDFSearchResult实体类: [DataContract(Name = "PDFSearchResult")] public class PDFSearch ...
随机推荐
- 3_08_MSSQL课程_Ado.Net_子查询
子查询 1.把一个查询结果作为一个表来使用,就是子查询. 2.把一个查询结果作为一个 表达式进行使用就是子查询. (分页Sql)
- JMS消息传递的类型
对于消息的传递有两种类型: 一种是点对点的,即一个生产者和一个消费者一一对应: 另一种是发布/ 订阅模式,即一个生产者产生消息并进行发送后,可以由多个消费者进 行接收.
- Failed to read candidate component class
今天编程时遇到了Failed to read candidate component class 这个异常,查了好久终于发现了是因为jdk的版本不对,所以报了这个错.
- Linux中制作静态库
静态库生成: 1.第一步:生成.o文件 2.第二步:将所有.o文件打包 ar src libMyTest.a *.o 生成出libMyTest.a 3.使用: 第一种:gcc main.c ...
- CSS各种小技巧
/* *背景的透明度设置 */ -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); 待续...
- 【协作式原创】查漏补缺之Go并发问题(单核多核)
主要回答一下几个问题 1.单核并发问题 2.多核并发问题 2.几个不正确的同步案例 1.单核并发问题 先看一段go(1.11)代码: 单核CPU,1万个携程,每个携程执行100次+1操作, 思考n最终 ...
- ios 物流时间轴,自动匹配电话号码,可点击拨打
http://www.code4app.com/thread-27587-1-1.html 资讯时间轴(折叠/展开) http://www.code4app.com/thread-32358-1-1. ...
- springboot devtool热部署的一个大坑
spring.devtools.restart.poll-interval=3000ms spring.devtools.restart.quiet-period=2999ms 别问我为什么,问就是一 ...
- 第五周之Hadoop学习（五）
在上周已经完成Hadoop的Java编程环境下的配置,这周则是通过对Eclipse的环境编程对Hadoop的API进行简单的调用 参考地址:https://blog.csdn.net/u0105237 ...
- Netsparker介绍
Netsparker是一款综合型的web应用安全漏洞扫描工具,它分为专业版和免费版,免费版的功能也比较强大.Netsparker与其他综合性的web应用安全扫描工具相比的一个特点是它能够更好的检测SQ ...