定制设计jQuery+css+html淘宝购物车模块

注意给checkbox定制设计定制设计添加事件就是用change()

给button添加事件就是用click（）

1、每次点击+号，定制设计根据文本框的值乘以当定制设计前商品的价格就是商品的小计

2、定制设计只能增加本商品的小计，定制设计就是当前商品的小计模块

3、定制设计修改普通元素的内容是text方法

4、定制设计当前商品的价格要把￥定制设计符号去掉再相乘 substr（）

5、parents（‘选择器’）定制设计可以返回指定祖先元素4

6、定制设计最后计算的结果如果想要通过toFixed(2)方法

7、定制设计用户也可以直接修改表定制设计单里面的值，定制设计同样要计算小计，用表单change事件

8、定制设计用最新的表单内容的值定制设计乘以单价即可，定制设计但还是当前商品的小计

定制设计计算总计和总额：

思路：定制设计把所有文本框里面的值定制设计相加就是总计数量，总额同理

文本框里面的值不相同，如果想要相加就需要用到each的遍历，声明一个变量，相加即可

点击+号或者-号，都会改变总计和总额，如果用户修改了文本框里面的值也会改变总额，那么都要分别添加到这三个事件中，因此封装一个函数来求总额和总计，以上几个操作调用即可

注意：总计是文本框中的值相加val（）。总额是普通元素的内容text（）

注意普通元素里面的内容要去掉￥并且转为数字型后才能相加

删除商品模块：

1、把商品remove（）删除元素即可

2、三个地方需要删除：1、商品后面的删除按钮2、删除选中的商品3、清理购物车

1、商品后面的删除按钮：一定是删除当前的商品，所以从$(this)出发

2、删除选中的商品：先判断小的复选框按钮是否选中状态，如果选中，则删除对应的商品

可以不用遍历，$('element:checked')可以直接拿出被选中的复选框

选中商品添加背景色

核心：选中的商品添加背景，不选中的商品移除背景即可

1、全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景

2、小的复选框点击：如果是选中状态，则当前商品添加背景，否则移除背景

3、这个背景，可以通过类进行修改，添加类和移除类

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         img {
  11.             width: 80px;
  12.             height: 80px
  13.         }
  14.         
  15.         a {
  16.             color: black;
  17.             text-decoration: none;
  18.         }
  19.         
  20.         .mony {
  21.             width: 20px;
  22.             text-align: center;
  23.         }
  24.     </style>
  25.     <script src="jquery.min.js"></script>
  26. </head>
  27.  
  28. <body>
  29.     <div>全部商品</div>
  30.     <!-- 一个表单元素 -->
  31.     <form action="">
  32.         <table style="border-collapse: 0px;border-spacing: 0px;width:872px">
  33.             <tr style="background-color:grey;">
  34.                 <td style='width:60px'><input type="checkbox" class="choseall">全选</td>
  35.                 <td style="width:472px;height:40px">商品</td>
  36.                 <td style='width:60px'>单价</td>
  37.                 <td style="width:100px">数量</td>
  38.                 <td style="width:110px">小计</td>
  39.                 <td style='width:70px'>操作</td>
  40.             </tr>
  41.             <tr>
  42.                 <td><input type="checkbox" class="goodchose"></td>
  43.                 <td>
  44.                     <div>
  45.                         <div style="float:left">
  46.                             <a href="">
  47.                                 <img src="https://img.alicdn.com/bao/uploaded/i2/2904754564/O1CN011Q0OER1jaMJXxFeHl_!!2904754564.jpg_240x240.jpg" alt="">
  48.                             </a>
  49.                         </div>
  50.                         <div>
  51.                             <a href="javascript:;">【新势力周】YUKI小树家可爱趣味印花短款白T恤+卡扣高腰宽松复古阔腿牛仔长裤</a>
  52.                         </div>
  53.                     </div>
  54.                 </td>
  55.                 <td class="onemony">￥37.00</td>
  56.                 <td>
  57.                     <input type="button" value="-" class="jian"><input type="text" class="mony" value="1"><input type="button" value="+" class="add">
  58.                 </td>
  59.                 <td class="totalmony">￥37.00</td>
  60.                 <td class="deletthis">删除</td>
  61.             </tr>
  62.             <tr>
  63.                 <td><input type="checkbox" class="goodchose"></td>
  64.                 <td>
  65.                     <div>
  66.                         <div style="float:left">
  67.                             <a href="">
  68.                                 <img src="https://img.alicdn.com/bao/uploaded/i1/3606826698/O1CN01NPCasY1zLjTBGmAax_!!3606826698.jpg_240x240.jpg" alt="">
  69.                             </a>
  70.                         </div>
  71.                         <div>
  72.                             <a href="javascript:;">日系正肩短袖t恤女夏薄款设计感小众日系甜酷学生小个子宽松上衣</a>
  73.                         </div>
  74.                     </div>
  75.                 </td>
  76.                 <td class="onemony">￥49.90</td>
  77.                 <td>
  78.                     <input type="button" value="-" class="jian"><input type="text" class="mony" value="1"><input type="button" value="+" class="add">
  79.                 </td>
  80.                 <td class="totalmony">￥49.90</td>
  81.                 <td class="deletthis">删除</td>
  82.             </tr>
  83.             <tr>
  84.                 <td><input type="checkbox" class="goodchose"></td>
  85.                 <td>
  86.                     <div>
  87.                         <div style="float:left">
  88.                             <a href="">
  89.                                 <img src="https://img.alicdn.com/bao/uploaded/i3/3606826698/O1CN01jfI3hB1zLjZhqP5rC_!!3606826698.jpg_240x240.jpg" alt="">
  90.                             </a>
  91.                         </div>
  92.                         <div>
  93.                             <a href="javascript:;">春秋格子衬衫外套女2022新款小个子设计感小众宽松慵懒风日系上衣</a>
  94.                         </div>
  95.                     </div>
  96.                 </td>
  97.                 <td class="onemony">￥69.90</td>
  98.                 <td>
  99.                     <input type="button" value="-" class="jian"><input type="text" class="mony" value="1"><input type="button" value="+" class="add">
  100.                 </td>
  101.                 <td class="totalmony">￥69.90</td>
  102.                 <td class="deletthis">删除</td>
  103.             </tr>
  104.             <tr>
  105.                 <td><input type="checkbox" class="goodchose"></td>
  106.                 <td>
  107.                     <div>
  108.                         <div style="float:left">
  109.                             <a href="">
  110.                                 <img src="https://img.alicdn.com/bao/uploaded/i2/628189716/O1CN01mpRMR22Ldyv4OgUtt_!!0-item_pic.jpg_80x80.jpg" alt="">
  111.                             </a>
  112.                         </div>
  113.                         <div>
  114.                             <a href="javascript:;">满减【百草味-红油面皮134g】方便面盒装速食凉皮拌泡面米粉凉皮</a>
  115.                         </div>
  116.                     </div>
  117.                 </td>
  118.                 <td class="onemony">￥23.70</td>
  119.                 <td>
  120.                     <input type="button" value="-" class="jian"><input type="text" class="mony" value="1"><input type="button" value="+" class="add">
  121.                 </td>
  122.                 <td class="totalmony">￥23.70</td>
  123.                 <td class="deletthis">删除</td>
  124.             </tr>
  125.         </table>
  126.         <div style="position:fixed;bottom:0px;width:872px;background-color:rgb(184, 177, 177);height:50px;line-height: 50px;">
  127.  
  128.             <input type="checkbox" class="chosealllast">全选<span style="position:absolute;left:70px" class="chosedelet">删除选中的商品</span><span style="position:absolute;left:200px" class="clearall">清理购物车</span>
  129.             <span style="position:absolute;right:230px;" class="totoalgoodn">已经选0件商品</span><span style="position:absolute;right:150px;">总价：</span>
  130.             <span style="position:absolute;left:715px;color:red;font-weight: bold;" class="totalprice">￥12.60</span>
  131.  
  132.  
  133.         </div>
  134.     </form>
  135.     <script>
  136.         $(function() {
  137.             //1、全选按钮。上下的全选按钮效果是一样的，按钮状态选中，那么所有商品的状态为选中。点击全选按钮让其不选中时，商品的选中状态就全部取消choseall与goodchose
  138.             $('.choseall').change(function() {
  139.                 //让下面商品的选中状态与全选按钮的一致$('.choseall').prop(checked)
  140.                 $('.goodchose').prop('checked', $('.choseall').prop('checked'))
  141.                 $('.chosealllast').prop('checked', $('.choseall').prop('checked'))
  142.                     //     //全选按钮按下，那么商品总数就等于goodchose的数量
  143.                     // if ($('.choseall').prop('checked') == true) {
  144.                     //     $('.totoalgoodn').text('已经选' + $('.goodchose').length + '件商品')
  145.                     // }
  146.                     // //取消全选数目就等于0
  147.                     // if ($('.choseall').prop('checked') == false) {
  148.                     //     $('.totoalgoodn').text('已经选' + 0 + '件商品')
  149.                     // }
  150.                     //复制一份到下面的全选按钮中
  151.                 if ($(this).prop('checked') == true) {
  152.                     $('.goodchose').parent().parent().css('background-color', 'aliceblue')
  153.                 } else {
  154.                     $('.goodchose').parent().parent().css('background-color', '')
  155.                 }
  156.             })
  157.             $('.chosealllast').change(function() {
  158.                 //让下面商品的选中状态与全选按钮的一致$('.choseall').prop(checked)
  159.                 $('.goodchose').prop('checked', $('.chosealllast').prop('checked'))
  160.                 $('.choseall').prop('checked', $('.chosealllast').prop('checked'))
  161.                     // if ($('.choseall').prop('checked') == true) {
  162.                     //     $('.totoalgoodn').text('已经选' + $('.goodchose').length + '件商品')
  163.                     // }
  164.                     // //取消全选数目就等于0
  165.                     // if ($('.choseall').prop('checked') == false) {
  166.                     //     $('.totoalgoodn').text('已经选' + 0 + '件商品')
  167.                     // }
  168.                 if ($(this).prop('checked') == true) {
  169.                     $('.goodchose').parent().parent().css('background-color', 'aliceblue')
  170.                 } else {
  171.                     $('.goodchose').parent().parent().css('background-color', '')
  172.                 }
  173.             })
  174.  
  175.             //2、当商品的选中个数小于商品栏个数的时候，两个全选按钮就会取消选中element：checked  用来专门获取复选框被选中的情况.length获取个数
  176.             $('.goodchose').change(function() {
  177.                 // console.log($('.goodchose:checked'))
  178.                 if ($('.goodchose:checked').length != $('.goodchose').length) {
  179.                     $('.choseall').prop('checked', false)
  180.                     $('.chosealllast').prop('checked', false)
  181.  
  182.                 }
  183.  
  184.                 //当商品的选中个数等于商品个数的时候，就相当于全选了，此时两个全选复选框全部选中
  185.                 if ($('.goodchose:checked').length == $('.goodchose').length) {
  186.                     $('.choseall').prop('checked', true)
  187.                     $('.chosealllast').prop('checked', true)
  188.                 }
  189.                 // //6、更改商品总数内容
  190.                 // $('.totoalgoodn').text('已经选' + $('.goodchose:checked').length + '件商品')
  191.                 // console.log($('.goodchose:checked').length);
  192.  
  193.                 //11
  194.                 if ($(this).prop('checked') == true) {
  195.                     $(this).parent().parent().css('background-color', 'aliceblue')
  196.                 } else {
  197.                     $(this).parent().parent().css('background-color', '')
  198.                 }
  199.  
  200.             })
  201.  
  202.             //3、修改数量为jian和add添加事件
  203.             $('.add').click(function() {
  204.  
  205.                 //这个商品的价格改变,siblings('')
  206.                 //是在初始值上每点击一次就减一,但最小为一
  207.                 var b = $(this).siblings('.mony').prop('value')
  208.                     //这个b是一个字符型
  209.                 $(this).siblings('.mony').prop('value', parseInt(b) + 1)
  210.                     //4|
  211.                 var c = $(this).parent().siblings('.onemony').text().substr(1)
  212.                     // console.log(c)
  213.                     //更改小计里面的内容,显示两个小数.toFixed(2)
  214.                 $(this).parent().siblings('.totalmony').text('￥' + (c * (parseInt(b) + 1)).toFixed(2))
  215.                 totalnumber()
  216.             })
  217.             $('.jian').click(function() {
  218.                 //这个商品的价格改变,siblings('')
  219.                 //是在初始值上每点击一次就减一,但最小为一
  220.                 var a = parseInt($(this).siblings('.mony').prop('value'))
  221.                 if (a >= 2) {
  222.                     $(this).siblings('.mony').prop('value', a - 1)
  223.                         //4|
  224.                     var c = $(this).parent().siblings('.onemony').text().substr(1)
  225.                         // console.log(c)
  226.                         //更改小计里面的内容,显示两个小数.toFixed(2)
  227.                     $(this).parent().siblings('.totalmony').text('￥' + (c * (a - 1)).toFixed(2))
  228.                 }
  229.                 totalnumber()
  230.             })
  231.  
  232.             //4、实现小计跟随数量变化，用数量的值*单价。单价去掉￥，得到数字,因为是跟随数量变化的，所以这一部分添加到点击事件中去,substr()
  233.  
  234.             //5、手动更改数量的时候，小计会发生改变.给mony添加change事件
  235.             $('.mony').change(function() {
  236.                     //获得这里面的值赋值给一个变量
  237.                     var number = $(this).prop('value')
  238.                         //获取对应的单价
  239.                     var c = $(this).parent().siblings('.onemony').text().substr(1)
  240.                         //要保证合格值大于等于1
  241.                     if (number >= 1) {
  242.                         var b = number * c
  243.                     }
  244.                     //当number小于1时，默认为1
  245.                     if (number < 1) {
  246.                         $(this).prop('value', 1)
  247.                         number = 1
  248.                         var b = number * c
  249.                     }
  250.                     // alert(number)
  251.                     // console.log(number)
  252.                     console.log(b)
  253.                     $(this).parent().siblings('.totalmony').text('￥' + (b).toFixed(2))
  254.                     totalnumber()
  255.                 })
  256.                 //6、获得已经选择的商品个数，就是看商品栏的状态选择个数,再状态变化的事件中进行更改--不对，商品数目拿的是表单里面的数量综合，一旦表单里面的元素值发生改变的时候，就要重新计算以下商品的数目
  257.  
  258.             //7、更改价格，价格的话就是小计的累加。那么就需要对小计进行遍历，一旦小计发生改变，就需要遍历一次去改变总价
  259.             //函数封装
  260.             //总计
  261.             function totalnumber() {
  262.                 var ton = 0
  263.                 $('.mony').each(function(index, ele) {
  264.                     // console.log(index);
  265.                     // console.log($('.mony').eq(index).val());直接拿ele这个元素里面的内容，不需要进行索引
  266.                     ton = ton + parseInt($(ele).val())
  267.                 })
  268.  
  269.                 $('.totoalgoodn').text('已经选' + ton + '件商品')
  270.                     //总额,从小计里面获得，去掉￥，再遍历相加
  271.                 var mon = 0
  272.                 $('.totalmony').each(function(i, e) {
  273.                         //首先获取每个元素的text
  274.  
  275.                         mon = mon + parseInt($(e).text().substr(1))
  276.  
  277.                     })
  278.                     //把mon给总价后的数值
  279.                 $('.totalprice').text('￥' + mon.toFixed(2))
  280.             }
  281.             totalnumber() //打开这个页面，有默认的值存在，所以也要调用一次
  282.  
  283.             //8、按下删除键，就删除此时的商品
  284.             $('.deletthis').click(function() {
  285.                 //删除我的父亲tr
  286.                 $(this).parent().remove()
  287.                 totalnumber()
  288.             })
  289.  
  290.             //9、删除选中的商品
  291.             $('.chosedelet').click(function() {
  292.                 //要获取我选中的商品是那些，并将其删除
  293.                 //对所有的goodchose进行遍历
  294.                 // $('.goodchose').each(function(index, ele) {
  295.                 //     //判断如果当前元素ele的状态是true，则将该元素的父亲的父亲tr删除
  296.                 //     if ($(ele).prop('checked') == true) {
  297.                 //         $(ele).parent().parent().remove()
  298.                 //     }
  299.                 // })
  300.                 //可以不用遍历
  301.                 $('.goodchose:checked').parent().parent().remove()
  302.                 totalnumber()
  303.             })
  304.  
  305.             //10、按下清理购物车，就将所有的商品都清理掉
  306.             $('.clearall').click(function() {
  307.                     //这里不需要进行遍历
  308.                     $('.goodchose').parent().parent().remove()
  309.                     totalnumber()
  310.                 })
  311.                 //11、选定一个商品就给其添加一个背景色,放到商品购物状态change事件中
  312.  
  313.         })
  314.     </script>
  315. </body>
  316.  
  317. </html>

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发