购物车案例

用 jQuery 改写购物车的全选/全不选功能

$("#check-all").click((ev) =>
  $("[name='itemId']").each((index, btn) => (btn.checked = ev.target.checked))
);
//    每个复选框的change事件回调
$("[name='itemId']").each(function (index, btn) {
  $(btn).change(function () {
    let count = 0;
    $("[name='itemId']").each((index, btn) => btn.checked && count++);
    // 如果数量等于全部按钮的数量，就全选按钮勾选，反之不选
    $("[name='itemId']").length == count
      ? ($("#check-all")[0].checked = true)
      : ($("#check-all")[0].checked = false);
  });
});

用 jq 改写金额自动计算

// 获取每个商品的数量
const numArr = Array.from($('input[type="number"]'));
// 每个商品的单价
const unitPriceArr = Array.from($("tbody>tr>td:nth-of-type(5)"));
// 获取每个商品的金额（计算值，当前为空）
const amountArr = Array.from($("tbody>tr>td:last-of-type"));
numArr.forEach((item) => $(item).change(() => autoCalculate()));
window.addEventListener("load", autoCalculate, false);
function autoCalculate() {
  // 1. 计算商品总数
  $("#total-num")[0].innerHTML = numArr.reduce(
    (pre, next) => (pre += parseInt(next.value)),
    0
  );
  // 2. 计算没见商品的金额
  amountArr.forEach(
    (item, index) =>
      (item.innerHTML = unitPriceArr[index].innerHTML * numArr[index].value)
  );
  //3. 计算总金额
  $("#total-amount")[0].innerHTML = amountArr.reduce(
    (pre, next) => (pre += parseInt(next.innerHTML)),
    0
  );
}

为购物车的自动计算功能添加新功能,全选,单选时也能自动计算

btn.checked
    ? ($("#total-num")[0].innerHTML =
        parseInt($("#total-num")[0].innerHTML) +
        parseInt($('input[type="number"]')[index].value))
    : ($("#total-num")[0].innerHTML =
        $("#total-num")[0].innerHTML -
        $('input[type="number"]')[index].value);
});

全选自动计算

//   添加全选按钮事件
$("#check-all").click(function (ev) {
  $("[name='itemId']").each((index, btn) => {
    btn.checked = ev.target.checked;
    btn.checked ? autoCalculate() : ($("#total-num")[0].innerHTML = 0);
  });
});

总结：购物车案例需要的是清晰的逻辑，对 DOM 元素熟悉操作，全选，单选按钮是单个对象和数组对象的 dom 操作，类数组转换为数组，数值运算，属性获取等等，这些常规操作，在购物车案例里面能够得到很好的锻炼。

（1111）购物车案例

购物车案例

相关文章