js - 简单的购物车增减操作

来做一个简陋的购物车吧。


4378607-2380868a99e3a118.png
简陋的购物车

功能呢,就是可以通过加减按钮来操作数量,同时商品的合计和下面的总计都会动态地发生变化,实现一个增减和计算的例子。
首先我们简单地写一下html:

<body>
    <ul id="shopLi"></ul> <!-- 用来存放渲染出来的购物车列表 -->
    <p class="addAll">总计:
        <span id="allPrice"></span> <!-- 用来存放渲染出来的总金额 -->
    </p>
    <script src="./shopList.js"></script>
</body>

先随便虚拟一些数据,创建一个购物list数组,存放每一条对象。

let shopList = [{
    id: 1,
    price: 10,
    count: 0
}, {
    id: 2,
    price: 15,
    count: 0
}, {
    id: 3,
    price: 8,
    count: 0
}]

我师父曾经说过,写方法和函数的时候要纯粹,不要管DOM怎样,要把重点放在逻辑和数据上。(现在他离职了不能继续教我了 T_T 所以要自己努力了。看到我博客的朋友如果觉得我写的方法不好或者比较冗余,一定要帮我指出呀!)

增加数量方法

这里传入了两个参数,一个是数组,一个是索引。
我的理解是增加数量是需要选出特定的某一个对象,所以传入了两个参数。

function addCount(arr, index) {
    arr[index].count = arr[index].count + 1;
    return arr[index].count;
}

当我执行这个方法的时候,相应对象的count+1。

减少数量方法

和增加的思路一样。
不过存在一个判断,如果数量小于等于零,就不执行这个方法了。

function minusCount(arr, index) {
    if (arr[index].count <= 0) {
        return false;
    } else {
        return arr[index].count = arr[index].count - 1;
    }
}
计算单品总价方法
function countTotal(arr, index) {
    let totalPrice = 0;
    totalPrice = arr[index].price * arr[index].count;
    return totalPrice;
}
计算所有商品的总价
function countAll(arr) {
    let totalPrice = 0;
    let sum = 0;
    for (let i of arr) {
        totalPrice = i.price * i.count;
        sum = sum + totalPrice;
    }
    return sum;
}

方法都写好了,接下来就是页面的渲染了。

页面渲染

这一块自认为写的很繁琐,不知道原生js还有没有更好的方法呢。

let shopLi = document.getElementById("shopLi");
let inner = "";
for (let i in shopList) {
    inner += (`<li class="id=${shopList[i].id}"><span class="count">\
        <input type="button" value="-" class="minus">\
        <span class="thisCount">${shopList[i].count}</span>\
        <input type="button" value="+" class="plus">\
    </span>\
    <span>单价:\
        <span class="price">${shopList[i].price}</span>\
    </span>\
    <span>合计:\
        <span class="totalPrice">${countTotal(shopList, i)}</span>\
    </span></li>`);
}
shopLi.innerHTML = inner;

let allPrice = document.getElementById("allPrice");
allPrice.innerHTML = countAll(shopList);
DOM操作加减
let add = document.getElementsByClassName("plus");
let minus = document.getElementsByClassName("minus");
let thisCount = document.getElementsByClassName("thisCount");
let price = document.getElementsByClassName("totalPrice");

for (let i in shopList) {
    add[i].onclick = function () {
        addCount(shopList, i);
        thisCount[i].innerHTML = shopList[i].count;
         // 重新渲染页面
        price[i].innerHTML = countTotal(shopList, i);
        allPrice.innerHTML = countAll(shopList);
    }
    minus[i].onclick = function () {
        minusCount(shopList, i);
        thisCount[i].innerHTML = shopList[i].count;
         // 重新渲染页面
        price[i].innerHTML = countTotal(shopList, i);
        allPrice.innerHTML = countAll(shopList);
    }
}
展开阅读全文

没有更多推荐了,返回首页