jQuery实现购物车的操作
jQuery实现购物车
#购物车操作步骤：
一、实现购物车的全选和全不选功能及背景的添加和删除
二、实现数量模块的增加和减少
三、实现输入值改变商品的小计
四、用求和函数实现求和相加总价和总数量
五、实现商品的删除
提示：以下是本篇文章正文内容，下面案例可供参考。用$(function(){ 一、二、三、四、五...})来实现
一、实现购物车商品的全选和全不选及背景的添加和删除
1、当点击全选按钮时实现商品的全选和全不选
操作步骤：
核心思想：当点击全选按钮checkall的时候，要用全选按钮的状态设置给三个商品里面的按钮j-checkbox的状态
①当点击全选按钮checkall的时候，用change事件来给三个商品里面的按钮j-checkbo设置成选中的状态。
②通过并集选择器获取checkall和j_checkbox，并用prop()方法设置checked属性为checked状态
③如果checkall的属性为checked状态即选中全选按钮，则全选的商品背景颜色就会添加上(用addClass()方法实现类的添加)，否则删除背景颜色(用removeClass()方法实现类的删除)。
代码如下（示例）：
//当点击全选按钮时，j-checkbox的状态发生改变
$('.checkall').change(function(){$('.checkall,j-checkbox').prop("checked",$(this).prop("checked"));
//背景色的添加和删除
if($(this).prop("checked")){$('.cart-item').addClass('check-cart-item')}else{$('.cart-item').removeClass('check-cart-item')}
})
2、从商品列表的内部来实现单个选中，全选和全不选功能
操作步骤
核心思想：判断若商品列表内选中的商品个数==3，就要选中全选按钮，否则不选中全选按钮
①给j-checkbox添加点击事件，用:checked选择器表示被选中的j-checkbox，并判断其length是否等于商品列表内的全部商品个数。
②并用prop(“checked”,true/false)方法设置全选框checkall的属性，选中为true，未选中为false.
③如果单个商品被选中，即属性为checked状态，则给相对应的商品(cart-item)用addClass()方法添加背景色，否则removeClass()删除背景色
代码如下（示例）：
判断商品列表内选中的商品个数==3，就要选中全选按钮，否则不选中全选按钮$('.j-checkbox').click(function(){ if($('.j-checkbox:checked').length==3){$('.checkall').prop("checked",true)}else{$('.checkall').prop("checked",false)}//如果选中背景色改变if($(this).prop("checked")){//获取到相对应的cart-item,用多个parent()或直接用parents()$(this).parent().parent(".cart-item").addClass('check-cart-item'); }else{$(this).parent().parent(".cart-item").removeClass('check-cart-item')}})
二、实现数量模块的增加和减少
1、实现数量模块的增加
操作步骤：
核心思想：点击+时，需要有一个变量实现自增功能，后把变量的值给文本框
①获取数量添加按钮increment给其添加一个click点击事件，获取input控件的value中的值用val()方法，n++实现自增，即每次点击“+”就会实现数量的自增
②获取当前元素的父级的父级的兄弟的元素单价(p-price)中的内容，在这里用html()或text()方法都可以，因为内容中有￥符号，而html获取的是字符串，所以用substr(1)截取￥后面的字符串
③计算总价sum=(p*n).toFixed(2);toFixed()方法保留两位小数
④用html()给p-sum总价赋值，“￥”+sum拼接字符串
代码如下（示例）：
$('.increment').click(function(){//定义一个变量,初始值等于input中的value值var n=$(this).siblings('.itxt').val();n++;$(this).siblings('.itxt').val(n);//小计的改变var p=$(this).parent().parent().siblings(".p-price").html().substr(1);//substr截取字符串从0开始的，去掉0从1开始留var sum=(p*n).toFixed(2);//保留两位小数$(this).parent().parent().siblings(".p-sum").html("￥"+sum);//getSum();})
2.实现数量模块的减少同时改变价格小计
操作步骤：
①获取decrement给其添加click点击事件，操作方法与商品数量的增加相同
②注意只有当商品数量大于1个时才可以点击“-”减少商品，所以要添加一个if语句
③当商品数量小于1时，再点击“-”会弹出‘是否删除该商品’，要放在return语句之前。
代码如下（示例）：
$('.decrement').click(function(){//定义一个变量,初始值等于input中的value值var m=$(this).siblings('.itxt').val();if(m>1){m--;$(this).siblings('.itxt').val(m);var p=$(this).parent().parent().siblings(".p-price").html().substr(1);//substr截取字符串从0开始的，去掉0从1开始留var sum=(p*m).toFixed(2);//保留两位小数$(this).parent().parent().siblings(".p-sum").html("￥"+sum);}else{//return语句要在其他语句之后，不然就不执行了alert('是否删除该商品');return false; }//getSum();})
三、输入值改变商品的小计
操作步骤：
核心思想：获取输入的值，再进行数量和总价的改变
①获取input控件用类名，添加change事件用回调函数实现该功能
②数量和总价的计算方法与二相同
代码如下（示例）：
$('.itxt').change(function(){ var n=$(this).val();var p=$(this).parent().parent().siblings(".p-price").html().substr(1);var sum=(p*n).toFixed(2);$(this).parent().parent().siblings(".p-sum").html("￥"+sum);//getSum();})
四、用求和函数实现求和相加总价和总数量
操作步骤：
核心思想：求和相加总价,用求和函数，getSum()调用函数；获取并遍历全部个商品的itxt，用each(function(index,element){})。
①在求和函数getSum()中实现全部商品的遍历，首先定义初始商品数量count和价格price
②用each()方法遍历每个商品itxt，实现count的累加
③用text()给总数量赋值
④总价的求和与总量求和相同，不要忘记保留小数位数，字符串的截取和拼接
⑤最后不要忘记调用函数！！getSum();
在其他功能中也要调用该函数实现总价和总数量的计算
代码如下（示例）：
//求和函数getSum();function getSum(){//定义一个数量初始值var count=0;var price=0;//获取并遍历全部商品的itxt$('.itxt').each(function(index,element){count+=parseInt($(element).val()); //通过val获得的是字符型,要强转})$('.amount-sum em').text(count); //数量赋值//价格$('.p-sum').each(function(i,ele){price+=parseFloat($(ele).text().substr(1));}) $('.price-sum em').text("￥"+price.toFixed(2)); }
五、实现商品的删除
1、删除单个商品
操作步骤：
核心思想：remove()方法删除元素，作用对象是元素！
①用后代选择器选择出删除选项，添加点击事件
②给当前元素的商品用remove()方法删除掉该商品
③同时不要忘记总数量和总价的改变
代码如下（示例）：
$('.p-action a').click(function(){ $(this).parent().parent('.cart-item').remove();//删除后总价和数量变化getSum();})
2、删除选中的商品
代码如下（示例）：
$('.remove-batch').click(function(){//选择器$('.j-checkbox:checked').parent().parent('.cart-item').remove();getSum();})
3、删除全部商品
代码如下（示例）：
$('.clear-all').click(function(){$('.cart-item').remove();getSum();})
最后的实现效果：
总结
其中应用了以下知识点：
①jQuery的文本属性的获取和设置，html(),text(),val()方法
②:checked 选择器
③string.substr(start, length);截取字符串
④NumberObject.toFixed(num);设置保留小数的位数
⑤parent()和parents()方法。parents()可以查找出所有父类,包括body,html，也可以指定查找父级的父级元素。
⑥remove()方法。remove()方法移除被选元素，包括所有的文本和子节点；注意：如需移除元素，但保留数据和事件，使用 detach()方法代替；如只需从被选元素移除内容，使用 empty()方法。
⑦该方法也会移除被选元素的数据和事件。
each()方法遍历元素，同一类元素进行不同的操作；注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。获取DOM对象时不加引号
eg:
<div>123</div>
<div>www</div>
<div>张三</div>
<div>李四</div>
<script type="text/javascript">
//定义一个数组
var arr=['red','yellow','blue','pink'];
//each遍历
$('div').each(function(index,element){//index：回调函数的第一个参数一定是索引号,可以自己指定名称
//element:第二个参数一定是dom元素对象,可以自己命名
console.log(element);
$(element).css("color",arr[index]);
//=$(this).css("color",arr[index]);
})
</script>
jQuery实现购物车的操作相关推荐
- html购物车总价,jQuery实现购物车的总价计算和总价传值功能
效果图: 代码实现: 1.多选框代码: 2.结算价格代码: 3. jQuery实现价格计算代码: (当点击多选框时,下面的总计金额会跟随变化) $(function() { // 加载完页面时,计算总 ...
- ajax 实现总价刷新,jQuery实现购物车的总价计算和总价传值功能
效果图: 代码实现: 1.多选框代码: 2.结算价格代码: 3. jQuery实现价格计算代码: (当点击多选框时,下面的总计金额会跟随变化) $(function() { // 加载完页面时,计算总 ...
- classlist使用方法_如何通过使用HTML5的classList API在没有jQuery的情况下操作类
classlist使用方法 by Ayo Isaiah 通过Ayo Isaiah 如何通过使用HTML5的classList API在没有jQuery的情况下操作类 (How to manipulat ...
- jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章 认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
- Jquery基础之DOM操作
Jquery基础之DOM操作 Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DO ...
- jQuery中HTML的操作
jQuery中HTML的操作 创建元素的方式 jQuery中创建元素的方式: 1.$("标签的代码") 2.对象.html("标签的代码"); var aObj ...
- 原创：通过jQuery进行跨域操作
之前尝试过用aJax做的一些跨域请求,一般都是在本地可以跨域,但放到服务器上就不行了. 现在找到了一种更好的方法:.NET+$.getJSON,代码非常简洁,可以兼容各种主流浏览器,不会弹出安全提示对 ...
- jQuery attr removeAttr 属性操作
jQuery attr removeAttr 属性操作 <%@ page language="java" import="java.util.*" pag ...
- jQuery 基础教程 （四）之jQuery中的DOM操作
一.jQuery 中的 DOM 操作 (1)DOM(Document Object Model-文档对象模型):一 种与浏览器, 平台, 语言无关的接口, 使用该接口可以 轻松地访问页面中所有的标准组 ...
最新文章
- MultiThreadedHttpConnectionManager
- 课时5：闲聊之Python的数据类型
- detectron2训练自己的数据集_keras版MaskRCNN来训练自己的目标检测数据集
- cesium绘制网格_Cesium学习笔记-工具篇37-风场绘制
- DS二叉树--二叉树之数组存储
- 嵩天python123测试6_神华化工股票
- 编程实现路由算法_TCP/IP 之路由算法
- java商品名称_Java统计商品信息
- 2020年最好用的手机是哪一款_2020年换手机不用盲目，目前这4部最值得买，好看好用性价比高...
- 使用mfc修改窗口背景，图表
- 乐源机器人没电提醒吗_云迹讲解机器人，你的专属机器人服务专家
- linux 修改文件日期,Linux中使用touch命令来修改文件的时间
- j计算机集成维护工具,USBOS v2.1电脑超级维护工具启动盘（集成最全winPE）
- SEO学习必上的网址大全
- 庄子（公元前369年－公元前286年）
- 电感的阻抗-频率曲线
- tf.keras计算FLOPs
- php话费充值接口,手机话费充值接口
- JavaFX战旗类游戏开发 第一课 概述
- 椭圆隐式方程和参数方程的互相转换