文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

原生js实现计算购物车总金额的示例

2023-05-16 14:57

关注

随着vue、react、angular等MVVM框架的兴起。让之前需要对dom进行复杂操作才能实现的需求变得如此简单。确实,作为数据驱动dom的框架,让我们在项目中变得愈加游刃有余。但是当我们享受他给我们带来的便利时,适当的对原生的了解也能对我们技术的提升大有裨益。而且通过适当的编写js原生代码实现相应功能,也能更让我们喜欢上MVVM框架。废话少说:先通过效果图(左边为编辑购物车,右边为购物车列表)了解下需求:

59e4024f5384ede5e252cc155f86ba6.jpg

44472fee8d42a4d58e525c0c9e2fea4.jpg

需求痛点:这个需求的难点在于如何去将每个商品的总价汇集起来然后随着复选框的状态累加到合计费用中去。我们先看下商品的html结构:

   <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">
        <h3>${goods_name}</h3>
        <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>

我是这样解决上述难点的:我在每个商品的复选框下面增加一个隐藏域,它的值为当前商品的总价,当商品的数量发生改变时,我会将商品最终价格赋值各他的value值,然后我们在通过遍历所有复选框的选中状态拿到对应的隐藏域value值就得出我们想要的总价了。具体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、点击子复选框将金额赋值给隐藏input

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

  //获取单价元素
  const singlePrice = +parent.querySelector(".singlePrice").innerHTML;

  //获取商品数量
  const goodsSum = +parent.querySelector(".goodsSum").value;

  //商品总价为
  let totalPriceVal = (singlePrice * goodsSum).toFixed(2);

  //赋值给hidden input框
  el.nextElementSibling.value = totalPriceVal;

  getTotalMoney();
}

3、点击子复选框给父复选框添加状态

  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、点击全选复选框=>所有复选框都被选中

  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、点击商品数量增减时

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、点击编辑

  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 style="color: red; font-size: 3.7333vw">完成</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、点击删除按钮

  let goodsIdArr = [];
  cancel.addEventListener("click", function () {
    //获取被选中的复选框
    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、封装获取复选框的状态来计算总费用

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、计算总价

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

以上就是我用原生js实现购物车总金额的代码。写的时候也是备受煎熬。用原生js真的很繁琐。我的代码逻辑我觉得还有改进的地方,还望各位大神指点指点。欢迎大家点评~

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯