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 ...
随机推荐
- java 类型转换一些相关问题
猜测:第二句 第四句会出错 结果是第二句和第四句会出错.说明了父类可以向子类类型转换,而不同的子类直接不能类型转换.
- Jmeter 如何发起一个post请求
举例平台:https://www.juhe.cn/docs/api/id/65 前提条件: 1)要在聚合网站注册实名认证才可以收到Key,用于Get请求的参数数值 2)Jmeter本地安装好 3.这是 ...
- 【网摘自CSDN网站】当文本内容过多，展开更多 （css控制,）
<div class="more"><p class="btn">显示全部内容</p></div> .more ...
- 设计模式课程 设计模式精讲 3-8 迪米法特原则讲解及Coding
1 课程讲解 1.1 定义 1.2 特质 1.3 重点 2 代码演练 2.1 反例 2.2 正例 1 课程讲解 1.1 定义 定义:一个对象应该对其他对象保持最少的了解.又叫最少知道原则. 1.2 特 ...
- 10 从DFS到DFT
从DFS到DFT 周期序列的级数展开 正如连续时间周期信号可以表示为一系列正弦信号的和的形式,周期序列也可以表示为一系列正弦之和的形式,假设序列\(\tilde{x}[n]\)的周期为\(N\),那 ...
- 2.1 MySQL基础使用
本文是课上资料的总结非原创没有转载地址 目录 引言 为什么需要数据库? 数据库和应用程序的关系 MySQL基础使用 一.数据库简介 1.1 简介 1.2 常见数据库管理系统 1.3 MySQL卸载 1 ...
- 机器学习基础系列--先验概率 后验概率 似然函数 最大似然估计(MLE) 最大后验概率(MAE) 以及贝叶斯公式的理解
目录 机器学习基础 1. 概率和统计 2. 先验概率(由历史求因) 3. 后验概率(知果求因) 4. 似然函数(由因求果) 5. 有趣的野史--贝叶斯和似然之争-最大似然概率(MLE)-最大后验概率( ...
- VS2019 发布单文件
在项目.csproj文件下添加 <PropertyGroup> <OutputType>Exe</OutputType> <TargetFramework&g ...
- Spring 中 bean 的生命周期？
参考:https://www.cnblogs.com/kenshinobiy/p/4652008.html Spring Bean 生命周期如下: 1:Bean的建立: 容器寻找Bean的定义信息并将 ...
- gensim加载词向量文件
# -*- coding: utf-8 -*- # author: huihui # date: 2020/1/31 7:58 下午 ''' 根据语料训练词向量,并保存向量文件 ''' import ...