Javascript实现页面商品个数增减功能

效果

后台返回代码

Map<GoodsVO, Integer> cart = new HashMap();
cart.put(new GoodsVO(1001,"苹果",100),5);
cart.put(new GoodsVO(1002,"桔子",300),3);
cart.put(new GoodsVO(1003,"香蕉",150),3);
request.getSession().setAttribute("cat",cart);

前端页面

<c:forEach items="${cart}" var="item">
	<tr>
        <td>${item.key.name}td>
        <td>
            <span id="subSpan${item.key.id}" class="subSpan">-span>
            <input type="text" id="amountInput${item.key.id}" value="${item.value}" style="width: 40px;">
            <span id="addSpan${item.key.id}" class="addSpan">+span>
            <input type="hidden" id="stockInput" value="${item.key.stock}">
        td>
    tr>
c:forEach>


<script src="assets/js/jquery3.6.0.js">script>
<script>
    //购买商品数量减1
    $(".subSpan").click(function () {
        let subSpanId = $(this).attr("id");
        let id = subSpanId.substring(7);
        let amount = $("#amountInput" + id).val();
        if (amount - 1 <= 0) {
            alert("所购商品数量不能小于等于0");
            return;
        }
        $("#amountInput" + id).val(amount - 1);
    })
    //购买商品数量加1
    $(".addSpan").click(function () {
        let addSpanId = $(this).attr("id");
        let id = addSpanId.substring(7);
        let amount = $("#amountInput" + id).val();
        let stock = $("#stockInput").val();
        if (amount > stock) {
            alert("所购商品数量不能大于库存");
            return;
        }
        $("#amountInput" + id).val(amount + 1);
    })
script>