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 ...
随机推荐
- Excel实用知识1
纯手打,可能有错别字,使用的版本是office2013 转载请注明出处 http://www.cnblogs.com/hnnydxgjj/p/6329509.html ,谢谢 使用现成的模板 ”开头的 ...
- Redis 作为windows服务运行
如果服务器上以控制台方式运行Redis服务,非常不方便,不小心会被人点击关闭,到时服务就挂了. 使用 命令的方式,将配置加载到windows服务,执行后无法启动,提示配置问题. redis-serve ...
- 国外电商网站snapdeal爬取流程
首页爬取 1.首页获取各个目录的url 如所有优惠all_offers的其中urlhttps://www.snapdeal.com/products/men-apparel-shirts?sort=p ...
- 使用pandas读取excel
使用pandas读取excel Excel是微软的经典之作,在这里我们介绍使用Python的pandas数据分析包来解决此问题. pd.read_excel(io, sheet_name = 0, h ...
- tomcat注册为windows服务
打开CMD,进入到Tomcat的bin目录,执行命令:service.bat install [service_name] 如果卸载服务,可以执行:sc delete [service_name]
- 从零构建以太坊（Ethereum）智能合约到项目实战——第24章 IPFS + 区块链
P93 .1-IPFS环境配置P94 .2-IPFS+P .IPNS+P .个人博客搭建 - 如何在IPFS新增一个文件P95 .3-IPFS+P .IPNS+P .个人博客搭建 - 通过ipfs创建 ...
- CSS布局的三种机制
浮动元素之间没有缝隙,这和行内块还是不一样的,有点区别的! 2) 浮动元素与兄弟盒子之间的关系 注意:解决浮动的四种办法,后三种都是针对浮动元素的父元素的.
- EC20的低功耗模式
EC20的支持以下几种工作模式,睡眠模式包括MCU主机睡眠和EC20睡眠. 当MCU主机不睡眠时,通过AT+QICSK =1(发送完之后串口被禁用不再响应AT指令),DTR=1(投票EC20可以进入睡 ...
- 第1节 Scala基础语法：14、15、list集合练习
package cn.itcast.collect /** *作业题 */object ListTest { def main(args: Array[String]): Unit = { //创建一 ...
- 学习不一样的vue实战(2): 项目分析
学习不一样的vue实战(2): 项目分析 首先 首发博客: 我的博客 项目源码: 源码(喜欢请star) 项目预览: 预览 上一章: <学习不一样的vue(1)实战:环境搭建> 我的Q群: ...