怎么使用原生js實(shí)現(xiàn)計(jì)算購(gòu)物車總金額

今天小編給大家分享一下怎么使用原生js實(shí)現(xiàn)計(jì)算購(gòu)物車總金額的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

隨著vue、react、angular等MVVM框架的興起。讓之前需要對(duì)dom進(jìn)行復(fù)雜操作才能實(shí)現(xiàn)的需求變得如此簡(jiǎn)單。確實(shí)，作為數(shù)據(jù)驅(qū)動(dòng)dom的框架，讓我們?cè)陧?xiàng)目中變得愈加游刃有余。但是當(dāng)我們享受他給我們帶來(lái)的便利時(shí)，適當(dāng)?shù)膶?duì)原生的了解也能對(duì)我們技術(shù)的提升大有裨益。而且通過(guò)適當(dāng)?shù)木帉慾s原生代碼實(shí)現(xiàn)相應(yīng)功能，也能更讓我們喜歡上MVVM框架。廢話少說(shuō)：先通過(guò)效果圖（左邊為編輯購(gòu)物車，右邊為購(gòu)物車列表）了解下需求：

• 當(dāng)點(diǎn)擊商品復(fù)選框，當(dāng)前商品的總價(jià)會(huì)被計(jì)算到合計(jì)費(fèi)用中去

• 當(dāng)點(diǎn)擊商品數(shù)量增減且此時(shí)商品對(duì)應(yīng)的復(fù)選框處于選中狀態(tài)時(shí)，合計(jì)費(fèi)用會(huì)發(fā)生改變

• 點(diǎn)擊全選時(shí)，所有商品的復(fù)選框都被選中且合計(jì)費(fèi)用為所有商品總價(jià)

• 點(diǎn)擊編輯，此處文字變?yōu)椤巴瓿伞?，右下角的去結(jié)算按鈕變?yōu)榧t色刪除按鈕

• 在編輯購(gòu)物車情況下，當(dāng)我們勾選對(duì)應(yīng)商品的復(fù)選框然后點(diǎn)擊刪除，對(duì)應(yīng)的商品會(huì)被清除，且合計(jì)費(fèi)用為重置為0，“完成”變?yōu)椤熬庉嫛保瑒h除按鈕變?yōu)槿ソY(jié)算。

需求痛點(diǎn)：這個(gè)需求的難點(diǎn)在于如何去將每個(gè)商品的總價(jià)匯集起來(lái)然后隨著復(fù)選框的狀態(tài)累加到合計(jì)費(fèi)用中去。我們先看下商品的html結(jié)構(gòu)：

   <div class="cartMain1" data-id=${goods_id}>
    <input type="checkbox" class="checkbox" />
    <input type="hidden" class="hiddenVal">
    <div class="cartMsg">
      <img src="${goods_image}" alt="" />
      <div class="cartDetail2">
        <h4>${goods_name}</h4>
        <div class="cartDCont">
          <p class="commonMoney">￥<span class="singlePrice">${goods_price_max}</span></p>
          <div class="count">
            <button class="decrease">-</button>
            <input type="text" class="goodsSum" value=${goods_num} />
            <button class="increase">+</button>
          </div>
        </div>
      </div>
    </div>
  </div>

我是這樣解決上述難點(diǎn)的：我在每個(gè)商品的復(fù)選框下面增加一個(gè)隱藏域，它的值為當(dāng)前商品的總價(jià)，當(dāng)商品的數(shù)量發(fā)生改變時(shí)，我會(huì)將商品最終價(jià)格賦值各他的value值，然后我們?cè)谕ㄟ^(guò)遍歷所有復(fù)選框的選中狀態(tài)拿到對(duì)應(yīng)的隱藏域value值就得出我們想要的總價(jià)了。具體js代碼如下：

1、遍歷隱藏input的值獲取金額

function getHiddenMoney() {
  let str = 0;
  Array.from(checkboxEl).forEach((item) => {
    if (item.checked == true) {
      str += +item.nextElementSibling.value;
    }
  });
  document.querySelector(".totalPrice").innerHTML = str.toFixed(2);
}

2、點(diǎn)擊子復(fù)選框?qū)⒔痤~賦值給隱藏input

function toHiddenMoney(el) {
  const parent = el.parentNode;

  //獲取單價(jià)元素
  const singlePrice = +parent.querySelector(".singlePrice").innerHTML;

  //獲取商品數(shù)量
  const goodsSum = +parent.querySelector(".goodsSum").value;

  //商品總價(jià)為
  let totalPriceVal = (singlePrice * goodsSum).toFixed(2);

  //賦值給hidden input框
  el.nextElementSibling.value = totalPriceVal;

  getTotalMoney();
}

3、點(diǎn)擊子復(fù)選框給父復(fù)選框添加狀態(tài)

  for (let i = 0; i < box.length; i++) {
    box[i].addEventListener("click", function () {
      checkbox.checked = Array.from(box).every((item) => item.checked);
      toHiddenMoney(box[i]);
    });
  }

4、點(diǎn)擊全選復(fù)選框=>所有復(fù)選框都被選中

  const checkbox = document.querySelector("#checkbox");
  const box = document.querySelectorAll(".checkbox");
  checkbox.addEventListener("click", function () {
    for (let i = 0; i < box.length; i++) {
      box[i].checked = checkbox.checked;
      toHiddenMoney(box[i]);
    }
  });

5、點(diǎn)擊商品數(shù)量增減時(shí)

let goodCount = document.querySelectorAll(".count");
  goodCount.forEach((item) => {
    item.addEventListener("click", function (e) {
      let target = e.target;
      if (target.className == "decrease") {
        const inp = target.nextElementSibling;
        const hidden =
          target.parentNode.parentNode.parentNode.parentNode
            .previousElementSibling;
        const checkBox =
          target.parentNode.parentNode.parentNode.parentNode
            .previousElementSibling.previousElementSibling;
        const singleVal =
          +target.parentNode.previousElementSibling.querySelector(
            ".singlePrice"
          ).innerHTML;
        if (inp.value == 1) {
          return alert("不能再減了~");
        } else {
          inp.value--;
          hidden.value = singleVal * inp.value;
          toHiddenMoney(checkBox);
        }
      }
      if (target.className == "increase") {
        const inp = target.previousElementSibling;
        const hidden =
          target.parentNode.parentNode.parentNode.parentNode
            .previousElementSibling;
        const checkBox =
          target.parentNode.parentNode.parentNode.parentNode
            .previousElementSibling.previousElementSibling;
        const singleVal =
          +target.parentNode.previousElementSibling.querySelector(
            ".singlePrice"
          ).innerHTML;
        inp.value++;
        hidden.value = singleVal * inp.value;
        toHiddenMoney(checkBox);
      }
    });
  });

  const checkboxEl = document.querySelectorAll(".checkbox");

6、點(diǎn)擊編輯

  const edit = document.querySelector(".edit");
  let flag = true;
  const editHtml = edit.innerHTML;
  const account = document.querySelector(".account");
  const cancel = document.querySelector(".cancel");
  let newCheckbox = [];
  edit.addEventListener("click", function () {
    let editHtml2 = `<span >完成</span>`;
    console.log(flag);
    if (flag) {
      this.innerHTML = editHtml2;
      account.style.display = "none";
      cancel.style.display = "block";
    } else {
      this.innerHTML = editHtml;
      account.style.display = "block";
      cancel.style.display = "none";
    }
    flag = !flag;
  });

7、點(diǎn)擊刪除按鈕

  let goodsIdArr = [];
  cancel.addEventListener("click", function () {
    //獲取被選中的復(fù)選框
    newCheckbox = [...checkboxEl].filter((item) => item.checked == true);
    newCheckbox.forEach((item) => {
      item.parentNode.remove();
      goodsIdArr.push(item.parentNode.dataset.id);
    });
    edit.innerHTML = editHtml;
    account.style.display = "block";
    cancel.style.display = "none";
    document.querySelector(".totalPrice").innerHTML = +0.0;
  });

8、封裝獲取復(fù)選框的狀態(tài)來(lái)計(jì)算總費(fèi)用

function getTotalMoney() {
  let checkboxNew = document.querySelectorAll(".checkbox");
  arr = [];
  for (let i = 0; i < checkboxNew.length; i++) {
    if (checkboxNew[i].checked == true) {
      arr.push(+checkboxNew[i].nextElementSibling.value);
      getTotalPrice(arr);
    } else {
      getTotalPrice(arr);
    }
  }
}

9、計(jì)算總價(jià)

function getTotalPrice(arr) {
  document.querySelector(".totalPrice").innerHTML = arr
    .reduce((prev, cur) => prev + cur, 0)
    .toFixed(2);
}

以上就是“怎么使用原生js實(shí)現(xiàn)計(jì)算購(gòu)物車總金額”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。