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 ...
随机推荐
- cmake学习资料收集
CMake 学习笔记 : https://www.jianshu.com/p/c417e4ab8b30
- Win10 在 CUDA 10.1 下跑 TensorFlow 2.x
深度学习最热的两个框架是 pytorch 和 tensorflow,pytorch 最新版本是 1.3,tensorflow 最新版本为 2.0,在 win10 下 pytorch 1.3 要求的 c ...
- UIScrollView的API
@property(nonatomic, weak) id<UIScrollViewDelegate> delegate; 滚动视图对象的委托. @property(nonatomic) ...
- pytest框架，使用print在控制台输入
代码示例: import pytest@pytest.fixture(autouse=True,scope='session') #autouse=True,scope='session'def se ...
- selenium webdriver 定位元素 第一部分
static final WebDriver driver = ExplorerBase.IESetting(); // 实例化一个浏览器对象 @Test //@Ignore public void ...
- PAT T1003 Universal Travel Sites
网络流模板~ #include<bits/stdc++.h> using namespace std; ; const int inf=1e9; queue<int> q; i ...
- Java基础知识笔记第七章：内部类和异常类
内部类 /* *Java支持在一个类中定义另一个类,这样的类称为内部类,而包含内部类的类称为内部类的外嵌类 */ 重要关系: /* *1.内部类的外嵌类在内部类中仍然有效,内部类的方法也可以外嵌类的方 ...
- 南京江行智能获得百度和松禾资本的A+轮融资
导读 据公司情报专家<财经涂鸦>消息,南京江行联加智能科技有限公司(江行智能)获得百度 和松禾资本的A+ 轮融资. 天眼查信息显示,12 月 8 日,公司工商信息发生变更,股东新增了广州百 ...
- 32 commons-lang包学习
maven依赖 <dependency> <groupId>commons-lang</groupId> <artifactId>commons-lan ...
- 108、Java中String类之字符串文本替换
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...