热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

初学jQuery之jQuery虚假购物车与真实数据无关

初学者用jquery来写仿真的购物车,确实有点恶心,那我们今天就把这万恶的购物车剖析一下,来看看到底有什么难的.购物车的效果图那我们先从复

初学者用jquery来写仿真的购物车,确实有点恶心,那我们今天就把这万恶的购物车剖析一下,来看看到底有什么难的.

 

购物车的效果图

那我们先从复选框开始吧,废话不多说,上代码!!

带有序号的,都是一些分析!

 

1.全选或全不选效果

//点击复选框全选或全不选效果$("#allCheckBox").click(function(){var checked=$(this).is(":checked"); //检查这个集合里有没有匹配的元素 返回true,false$(".cart_td_1").children().attr("checked",checked); //把上面的变量放在这边来用
});//判断是否全选function ifAllChecked(){var checkedBoxs=$(".cart_td_1").children(); //获取到集合var sum=checkedBoxs.size(); //size() 与length() 返回的值是一样的var k=0; //迭代变量//each是循环checkedBoxs.each(function(index,dom){ //index当前对象的索引,或者是所有的对象的索引 dom当前对象,或者是对象if($(dom).is(":checked")) k++; //匹配页面上处于选中状态的元素
});if(k==sum){ //当我们拿出了input复选框的个数$("#allCheckBox").attr("checked",true); //如果为true的话,就改变值}else{$("#allCheckBox").attr("checked",false); //否则的话,我们也改变值
}}ifAllChecked();//页面加载完后运行//单选判断$(".cart_td_1").children().click(function(){ifAllChecked(); });

当我们解决了复选框的问题后,剩下的就是计算总价与小计的问题了,其实咋们仔细想想的话,压根就不难,难的是这些值它们全在html页面上,我们该怎么把他们拿下来,为我们所用哪?!!!!

 

2.进行计算函数

//计算总价与小计function productCount(){var $tr=$("#shopping").find("tr[id]");//总价与积分的初始值var summer=0;var integral=0;$tr.each(function(i,dom){//我们开始把页面上的值全部拿下来var num=$(dom).children(".cart_td_6").find("input").val();//商品数量var price=num*$(dom).children(".cart_td_5").text();//商品小计
$(dom).children(".cart_td_7").html(price);//显示商品小计summer+=price;//总价 已经开始在累加integral+=$(dom).children(".cart_td_4").text()*num;//积分
});$("#total").text(summer); //总价$("#integral").text(integral); //积分
}productCount();//页面加载完后运行

 

3.点击减号或加号得行为

//商品增加减少&#xff0c;flag为true时增加&#xff0c;flag为false时减少function changeNumber(dom,flag){var $input &#61; $(dom).parent().find("input");var value &#61; $input.val();if(flag){value&#43;&#43;; }else{value--;if(value<&#61;0){ //最起码件数不能低于0件&#xff0c;value&#61;1; //当我们已经规定了不能低于0件的时候&#xff0c;我们到底还是把件数减了&#xff0c;所以我们还是的把件数调整回来alert("宝贝数量必须大于0"); }}$input.val(value);productCount();};

 

因为加号和减号是图片&#xff0c;所以我们得把函数绑定到图片上

4.把点击加减函数绑定到图片上

//点击减少 当我们点击图片的时候&#xff0c;顺便调用一下方法$(".cart_td_6").find("img[alt&#61;&#39;minus&#39;]").click(function(){changeNumber(this,false);});//点击增加$(".cart_td_6").find("img[alt&#61;&#39;add&#39;]").click(function(){changeNumber(this,true);});

 

当然我们还有删除某一列商品&#xff0c;所以我使用了节点操作

5.节点操作

//点击删除 节点操作$(".cart_td_8").find("a").click(function(){$(this).parent().parent().prev().remove();//删除前一tr$(this).parent().parent().remove();//删除当前tr
productCount();});

 

还有删除所选&#xff0c;所以我们自己还得自定义一个函数

6.删除所选

//点击删除所选$("#deleteAll").click(function(){$("#shopping").find("tr[id]").each(function(i,e){var $tr&#61;$(e);//返回的值是true或falsevar checked&#61;$tr.children(".cart_td_1").children().is(":checked");if(checked){//prev遍历的方式用于搜索自己本身同辈元素的上一个
$tr.prev().remove();$tr.remove();}});//点击删除所选&#xff0c;依然调用计算总价的函数
productCount();});

所以经过我们层层的解析&#xff0c;其实压根也不难&#xff0c;对吧&#xff01;&#xff01;&#xff01;

我们这个虚假的购物车&#xff0c;才算完成&#xff01;&#xff01;&#xff01;

那我们下次再见把&#xff01;

 


转载于:https://www.cnblogs.com/bdqnquliang/p/6495868.html


推荐阅读
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 本文介绍了一些好用的搜索引擎的替代品,包括网盘搜索工具、百度网盘搜索引擎等。同时还介绍了一些笑话大全、GIF笑话图片、动态图等资源的搜索引擎。此外,还推荐了一些迅雷快传搜索和360云盘资源搜索的网盘搜索引擎。 ... [详细]
  • 【shell】网络处理:判断IP是否在网段、两个ip是否同网段、IP地址范围、网段包含关系
    本文介绍了使用shell脚本判断IP是否在同一网段、判断IP地址是否在某个范围内、计算IP地址范围、判断网段之间的包含关系的方法和原理。通过对IP和掩码进行与计算,可以判断两个IP是否在同一网段。同时,还提供了一段用于验证IP地址的正则表达式和判断特殊IP地址的方法。 ... [详细]
  • 本文介绍了绕过WAF的XSS检测机制的方法,包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法,该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型(DOM)接收器和源、实施适当的跨域资源共享(CORS)策略和其他安全策略,可以有效阻止XSS漏洞。但是,WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制,构建与正则表达式不匹配的XSS payload。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • 本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ... [详细]
  • 在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ... [详细]
  • 如何去除Win7快捷方式的箭头
    本文介绍了如何去除Win7快捷方式的箭头的方法,通过生成一个透明的ico图标并将其命名为Empty.ico,将图标复制到windows目录下,并导入注册表,即可去除箭头。这样做可以改善默认快捷方式的外观,提升桌面整洁度。 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • 深入理解CSS中的margin属性及其应用场景
    本文主要介绍了CSS中的margin属性及其应用场景,包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念,读者可以更好地掌握margin的用法和原理。同时,文中提供了一些相关的文档和规范供读者参考。 ... [详细]
author-avatar
实事求是2502932297
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有