jquery模拟淘宝购物车

今天要实现的一个功能页面就是利用jquery代码模拟一个淘宝网的购物车结算页面

总体页面效果如图:

首先我们要实现的内容的需求有如下几点:

1.在购物车页面中,当选中“全选”复选框时,所有商品前的复选框被选中,否则所有商品的复选框取消选中。

2.当所有商品前的复选框选中时,“全选”复选框被选中,否则“全选”复选框取消选中。

3.单击图标-的时候数量减一而且不能让物品小于0并且商品总价与积分随之改变。

4.单击图标+的时候数量增加并且商品总价与积分随之改变。

5.单击删除所选将删除用户选中商品,单击删除则删除该商品即可并达到商品总价与积分随之改变。

下面我们就开始进入代码

 <script type="text/javascript">
 //01.定义一个方法让它自动计算每行商品的小计,商品总价和可获积分
   function productCount() {
       var Total_price= 0;//定义一个变量保存总价格
       var integral = 0;//定义一个变量保存总积分
       $("tr[id]").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);
           //计算总价
           Total_price+= price;
           //计算积分
           integral += $(dom).children(".cart_td_4").text() * num;
       });
       //定位到总价对象给文本赋值
       $("#total").text(Total_price);
       //定位到可获积分对象给文本赋值
       $("#integral").text(integral);
   }
    $(function () {
        //调用上面我们定义好的用来自动计算商品金额的函数productCount()
        productCount();
        //02接下来实现全选的功能
        //02.1定位到全选按钮注册单击事件
        $("#allCheckBox").click(function () {
            $("input[name=cartCheckBox]").attr("checked", this.checked);
        });
        //02.2给所有子复选框绑定click事件
        $("input[name=cartCheckBox]").bind("click", function () {
            //定义临时变量
            var $check = $("input[name=cartCheckBox]");
            $("#allCheckBox").attr("checked",$check.length==$check.filter(":checked").length);
        });
        //03实现商品数量的增加和减少功能
        $(".hand").bind("click", function () {
            var count = $(this).prev().val();
            $(this).prev().val(++count);
            productCount();
        });
        $(".hand").bind("click", function () {
            var count = $(this).next().val();
            var result = count--;
            if (result <= 1) {
                alert("宝贝数量不可以小于0")
                count = 1;
            }
            $(this).next().val(count);
            productCount();
        });
        //04实现删除商品的功能
        //04.1单击删除所选删除商品
        $("#deleteAll").bind("click", function () {
            $("input[name=cartCheckBox]:checked").each(function () {
//04.1单击删除所选删除商品的,以下代码中删除前一个tr的代码不可以去下一句调换位置,否则将找不到所删除的tr
                $(this).parents("tr").prev().remove();//删除前一个tr;
                $(this).parents("tr").remove();//删除当前行
                productCount();
            });
        });
        //04.2删除单个商品
        $(".cart_td_8").find("a").click(function () {
            $(this).parent().parent().prev().remove();//删除前一个tr
            $(this).parent().parent().remove();//删除当前行
            productCount();

        });
    });
 </script>

好了以下就是jquery实现购物车的代码,如果需要网页HTML素材及代码请关注本人新浪微博李晓鹏0204私信本人,或者在以下评论告诉我

时间: 2024-10-01 04:38:28

jquery模拟淘宝购物车的相关文章

jquery仿淘宝购物车页面商品结算(附源码)

1.效果图如下: 2.源码如下: html部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0

淘宝购物车页面 -- PC端和移动端实战

最近花了半个月的时间,做了一个淘宝购物车页面的demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在media query为768px以下(也就是实现了ipad,iphone 6 plus,iphone6,S5等)的flexbox弹性布局. 还要再说的是,pc端和移动端淘宝购物车页面的bug基本修复完毕,完全适合一个对html,css,css3 ,html5和js有基础,并且熟悉jquery,scss,熟悉json数据交换格式,jquery ajax的人进行学习

淘宝购物车页面 智能搜索框Ajax异步加载数据

如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区非常的活跃,许多朋友都在不同地方分享了很多优秀的插件.我在相关的网站上找过想实现类似功能的插件,但是没有找到.于是乎,自己动手丰衣足食.自己来搭建智能搜索框下拉列表.当然,如果有类似功能并且常维护Bug的插件,望留言交流. 源码地址: 淘宝购物车页面--PC端和移动端项目实战 首先需要先给大家打一根

jquery仿淘宝规格颜色选择效果

jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script> <style> dd,dl{zoom:1;ove

一款基于jQuery仿淘宝红色分类导航

今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="nav"> <div class="area clearfix"> <div class="separate"> </div> <div

jquery仿淘宝焦点图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jquery特效-基于jQuery仿淘宝红色分类导航

今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. html代码: <div id="nav"> <div class="area clearfix"> <div class="separate"> </div> <div class="

模拟淘宝购物,运用cookie,记录登录账号信息,并且记住购物车内所选的商品

1.登录界面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&

iOS高仿淘宝购物车,功能模块应有尽有

刚做完一个淘宝的购物车,按着淘宝做的,换了个产品经理,人家喜欢JD的购物车,一句话,咱换个风格,好心 酸有没有,天天刷存在感,只有我们苦逼了,那么既然需求来了,就要按着大爷的要求改了,为了纪念下,咱写个 Demo给大家分享下.    我擦,我一看代码,我还是用AutoLayout做的,主界面代码都能快接近800了,全加起来想想有点多啊,这简直是用 生命在写Demo啊,该有的效果全有了,各位请看图       再来一组 简单分析下功能 1.给UIKit控件增加Badge的扩展(这个扩展需要的去代码