購物車案例

1. 用 jQuery 改寫購物車的全選/全不選功能

$("#check-all").click((ev) =>
  $("[name='itemId']").each((index, btn) => (btn.checked = ev.target.checked))
);
//    每個復選框的change事件回調(diào)
$("[name='itemId']").each(function (index, btn) {
  $(btn).change(function () {
    let count = 0;
    $("[name='itemId']").each((index, btn) => btn.checked && count++);
    // 如果數(shù)量等于全部按鈕的數(shù)量，就全選按鈕勾選，反之不選
    $("[name='itemId']").length == count
      ? ($("#check-all")[0].checked = true)
      : ($("#check-all")[0].checked = false);
  });
});

1. 用 jq 改寫金額自動計算

// 獲取每個商品的數(shù)量
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. 計算商品總數(shù)
  $("#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
  );
}

1. 為購物車的自動計算功能添加新功能,全選,單選時也能自動計算

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 元素熟悉操作，全選，單選按鈕是單個對象和數(shù)組對象的 dom 操作，類數(shù)組轉(zhuǎn)換為數(shù)組，數(shù)值運算，屬性獲取等等，這些常規(guī)操作，在購物車案例里面能夠得到很好的鍛煉。

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語：思路 在寫代碼之前就要想好的