效果

代码

html 结构

<div>
    <ul id="list-group">
        <li>
            <input type="button" value="-" name="sub"/>
            <strong>0</strong>
            <input type="button" value="+" name="add"/>
            单价：<em>12.5元</em>
            小计：<span>0元</span>
        </li>
        <li>
            <input type="button" value="-" name="sub"/>
            <strong>0</strong>
            <input type="button" value="+" name="add"/>
            单价：<em>10元</em>
            小计：<span>0元</span>
        </li>
        <li>
            <input type="button" value="-" name="sub"/>
            <strong>0</strong>
            <input type="button" value="+" name="add"/>
            单价：<em>22.5元</em>
            小计：<span>0元</span>
        </li>
        <li>
            <input type="button" value="-" name="sub"/>
            <strong>0</strong>
            <input type="button" value="+" name="add"/>
            单价：<em>6.5元</em>
            小计：<span>0元</span>
        </li>
    </ul>
    <p id="allUnit">商品数量合计共:0件</p>
    <p id="allPrice">总消费：0元<br/>
    <p id="maxPrice">其中购买的商品总价最贵的：0元</p>
</div>

JS

// 单个商品数量dom
    var oUnit = document.getElementsByTagName('strong');
    // 单价dom
    var onePrice = document.getElementsByTagName('em');
    // 小计 dom
    var subTotal = document.getElementsByTagName('span');
    // 总件数 dom
    var allUnit = document.getElementById('allUnit');
    // 总价 dom
    var oAllPrice = document.getElementById('allPrice');
    // 最贵商品
    var maxPrice = document.getElementById('maxPrice');

    // li
    var oUl = document.getElementById('list-group');
    var oLi = oUl.getElementsByTagName('li');

    for (let i =0; i<oLi.length; i++) {

        handleShop(i);

    };
    // 商品加减
    function handleShop(index) {
        let addBtn = document.getElementsByName('add');
        let subBtn = document.getElementsByName('sub');
        let num = 0;
        // 商品添加
        addBtn[index].onclick = () => {
            num ++;
            // 单个商品数量
            oUnit[index].innerText = num;

            // 小计
            subTotal[index].innerText = parseFloat(onePrice[index].innerText)*num + '元';

            // 总件数
            allUnit.innerText = `商品数量合计共:${total()}件`;

            // 总价
            oAllPrice.innerText = `总消费：${allPrice()}元`;

            // 最大值
            maxPrice.innerText = `其中购买的商品总价最贵的：${max()}元`;
        };

        // 商品减去
        subBtn[index].onclick = () => {
            num -- ;
            if (num < 0){
                num = 0;
            };
            // 单个商品数量
            oUnit[index].innerText = num;

            // 小计
            subTotal[index].innerText = parseFloat(onePrice[index].innerText)*num + '元';

            // 总件数
            allUnit.innerText = `商品数量合计共:${total()}件`;

            // 总价
            oAllPrice.innerText = `总消费：${allPrice()}元`;

            // 最大值
            maxPrice.innerText = `其中购买的商品总价最贵的：${max()}元`;
        };

    };

    // 总件数
    function total() {
        let sum = 0;
        for (let i=0; i<oUnit.length; i++) {
            sum += parseInt(oUnit[i].innerText)
        };
        return sum;
    };
    
    // 总价
    function allPrice() {
        let sum = 0;
        for (let i=0; i<subTotal.length; i++) {
            sum += parseFloat(subTotal[i].innerText);
        };
        return sum;
    };

    // 最大值
    function max() {
        let arr = [];

        for (let i=0; i<subTotal.length; i++) {
            arr.push(parseFloat(subTotal[i].innerText));
        };
        // 最大值，最小值反过来就可以
        arr.sort((a, b) => {
            return b-a
        });

        return arr[0];
    }