car.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. $(function() {
  2. // 1. 全选 全不选功能模块
  3. // 就是把全选按钮(checkall)的状态赋值给 三个小的按钮(j-checkbox)就可以了
  4. // 事件可以使用change
  5. $(".checkall").change(function() {
  6. // console.log($(this).prop("checked"));
  7. $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
  8. if ($(this).prop("checked")) {
  9. // 让所有的商品添加 check-cart-item 类名
  10. $(".cart-item").addClass("check-cart-item");
  11. } else {
  12. // check-cart-item 移除
  13. $(".cart-item").removeClass("check-cart-item");
  14. }
  15. });
  16. // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上,否则全选按钮不选。
  17. $(".j-checkbox").change(function() {
  18. // if(被选中的小的复选框的个数 === 3) {
  19. // 就要选中全选按钮
  20. // } else {
  21. // 不要选中全选按钮
  22. // }
  23. // console.log($(".j-checkbox:checked").length);
  24. // $(".j-checkbox").length 这个是所有的小复选框的个数
  25. if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
  26. $(".checkall").prop("checked", true);
  27. } else {
  28. $(".checkall").prop("checked", false);
  29. }
  30. if ($(this).prop("checked")) {
  31. // 让当前的商品添加 check-cart-item 类名
  32. $(this).parents(".cart-item").addClass("check-cart-item");
  33. } else {
  34. // check-cart-item 移除
  35. $(this).parents(".cart-item").removeClass("check-cart-item");
  36. }
  37. });
  38. // 3. 增减商品数量模块 首先声明一个变量,当我们点击+号(increment),就让这个值++,然后赋值给文本框。
  39. $(".increment").click(function() {
  40. // 得到当前兄弟文本框的值
  41. var n = $(this).siblings(".itxt").val();
  42. // console.log(n);
  43. n++;
  44. $(this).siblings(".itxt").val(n);
  45. // 3. 计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计
  46. // 当前商品的价格 p
  47. var p = $(this).parents(".p-num").siblings(".p-price").html();
  48. // console.log(p);
  49. p = p.substr(1);
  50. console.log(p);
  51. var price = (p * n).toFixed(2);
  52. // 小计模块
  53. // toFixed(2) 可以让我们保留2位小数
  54. $(this).parents(".p-num").siblings(".p-sum").html("¥" + price);
  55. getSum();
  56. });
  57. $(".decrement").click(function() {
  58. // 得到当前兄弟文本框的值
  59. var n = $(this).siblings(".itxt").val();
  60. if (n == 1) {
  61. return false;
  62. }
  63. // console.log(n);
  64. n--;
  65. $(this).siblings(".itxt").val(n);
  66. // var p = $(this).parent().parent().siblings(".p-price").html();
  67. // parents(".p-num") 返回指定的祖先元素
  68. var p = $(this).parents(".p-num").siblings(".p-price").html();
  69. // console.log(p);
  70. p = p.substr(1);
  71. console.log(p);
  72. // 小计模块
  73. $(this).parents(".p-num").siblings(".p-sum").html("¥" + (p * n).toFixed(2));
  74. getSum();
  75. });
  76. // 4. 用户修改文本框的值 计算 小计模块
  77. $(".itxt").change(function() {
  78. // 先得到文本框的里面的值 乘以 当前商品的单价
  79. var n = $(this).val();
  80. // 当前商品的单价
  81. var p = $(this).parents(".p-num").siblings(".p-price").html();
  82. // console.log(p);
  83. p = p.substr(1);
  84. $(this).parents(".p-num").siblings(".p-sum").html("¥" + (p * n).toFixed(2));
  85. getSum();
  86. });
  87. // 5. 计算总计和总额模块
  88. getSum();
  89. function getSum() {
  90. var count = 0; // 计算总件数
  91. var money = 0; // 计算总价钱
  92. $(".itxt").each(function(i, ele) {
  93. count += parseInt($(ele).val());
  94. });
  95. $(".amount-sum em").text(count);
  96. $(".p-sum").each(function(i, ele) {
  97. money += parseFloat($(ele).text().substr(1));
  98. });
  99. $(".price-sum em").text("¥" + money.toFixed(2));
  100. }
  101. // 6. 删除商品模块
  102. // (1) 商品后面的删除按钮
  103. $(".p-action a").click(function() {
  104. // 删除的是当前的商品
  105. $(this).parents(".cart-item").remove();
  106. getSum();
  107. });
  108. // (2) 删除选中的商品
  109. $(".remove-batch").click(function() {
  110. // 删除的是小的复选框选中的商品
  111. $(".j-checkbox:checked").parents(".cart-item").remove();
  112. getSum();
  113. });
  114. // (3) 清空购物车 删除全部商品
  115. $(".clear-all").click(function() {
  116. $(".cart-item").remove();
  117. getSum();
  118. })
  119. })