第22章 0114-购物车实战与ES6模块化技术，学习心得、笔记（jQuery实战，购物车，全选，全不选，计算总价）

今天所学心得、笔记

1、jQuery实战，购物车，全选，全不选，计算总价

示例截图

示例代码（只展示了script部分）

<script>
  // 1. 获取全选复选框,所有独立商品的复选框
  const checkAll = $("#check-all");
  const checkItems = $("[name=item]");
  // 1.1 点击全选，全不选, 改变商品复选框
  checkAll.change(function () {
    checkItems.prop("checked", $(this).prop("checked"));
    // 调用，自动计算函数
    autoCalculate();
  });
  // 1.2 点击商品复选框，改变全选，全不选
  checkItems.change(function () {
    // 方法1，比较checked数量与商品数量
    checkAll.prop("checked", $("[name=item]:checked").length == $("[name=item]").length);
    // 方法2，使用原生数组方法，Array.every()(逻辑‘或’，有一个真就为true),Array.some()(逻辑‘与’，全为真就为true)
    // 先使用$(checkItems)将JQ对象变原生，再使用[...原生对象]变数组，再使用every()方法
    // checkAll.prop("checked", [...$(checkItems)].every(item=>item.checked));
    // console.log([...$(checkItems)].every(item=>item.checked));
    // 调用，自动计算函数
    autoCalculate();
  });
  // 2. 计算商品总数量，金额合计、总计
  // 2.1 获取所有的数量控件
  const numInput = $('tbody input[type=number]');
  numInput.change(function () {
    autoCalculate();
  });
  // 3. 页面加载完成，调用，自动计算函数
  window.load = autoCalculate();
  // 2.2 封装自动计算函数
  function autoCalculate() {
    // 获取商品数量的, 数组;
    const numbers = $("tbody input[type=number]");
    const numArr = [...numbers].map(item => item.value * 1);
    // console.log(numArr);
    // 获取（被选中）商品数量的, 数组; 计算商品总数
    let numChecked = 0;
    const numbersChecked = $("[name=item]:checked").parent().siblings().children("input");
    // console.log(numbersChecked);
    numbersChecked.each((index, item)=> numChecked += item.value * 1);
    // console.log(numChecked);
    // 获取单价的, 数组
    const prices = $("tbody .price");
    const priceArr = [...prices].map(item => item.innerText * 1);
    // console.log(priceArr);
    // 计算每件商品合计金额, 单价 * 数量
    const amountArr = [priceArr, numArr].reduce((totalPrice, currNum) => totalPrice.map((item, index) => item * currNum[index]));
    // console.log(amountArr);
    // 将选中商品总数量，每个商品的合计金额，渲染到页面中
    // 选中商品总数量
    $("#sum").text(numChecked);
    // 每个商品的合计金额-------------注意：这句一定要放到，计算商品总金额之前
    $(".amount").each((index, item) => item.textContent = amountArr[index]);
    // 计算每件（被选中）商品合计累加的, 总金额
    let amountPriceChecked = 0;
    const amountPriceArrChecked = $("[name=item]:checked").parent().siblings(".amount");
    // console.log(amountPriceArrChecked);
    amountPriceArrChecked.each((index, item)=> amountPriceChecked += item.innerText * 1);
    // console.log(amountPriceChecked);
    // （被选中）商品合计累加的, 总金额，渲染到页面中
    $("#total-amount").text(amountPriceChecked);
  }
</script>

今天所学心得、笔记

1、jQuery实战，购物车，全选，全不选，计算总价

示例截图

示例代码（只展示了script部分）

更多相关文章

随机推荐