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

时间：2022-05-12 01:03:33

效果

利用jQuery操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变

  • 当用户点击+按钮是，文本框中的商品数量增加1，单项价格和总价相应增加
  • 当用户点击-按钮是，文本框中的商品数量减1（不能小于1），单项价格和总价相应减少

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

页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
</head>

<body>
     <div>
         <span>数量：</span>
         <div class="jia_jian" style="display: inline-block;margin-top: 5px;">
             <img  class="jian" height="25" src="http://localhost:9090/wego/sys/jian.jpg" width="21"/>
             <input  class="shuliang" th:value="1" type="text"/>
             <img  class="jia" height="25" src="http://localhost:9090/wego/sys/jia.jpg" width="21"/>
         </div>
     </div>
     <div class="gc">
         <!--立即购买-->
         <a rel="nofollow" href="order.html"><img src="http://localhost:9090/wego/sys/goumai.png" width="117"  height="36" /></a>&nbsp;&nbsp;
         <!--加入购物车-->
         <a rel="nofollow" href="javascript:void(0);" th:onclick="'addCartItem('+${goods.id}+')'"><img src="http://localhost:9090/wego/sys/cart.png" width="117" height="36" /></a>
     </div>

<script type="text/javascript">
    //购买商品数量减1
    $("#subSpan").click(function () {
        let amount = $("#amountInput").val();
        if (amount - 1 <= 0) {
            alert("所购商品数量不能小于等于0");
            return;
        }
        $("#amountInput").val(amount - 1);
    })

    //商品编号
    //商品编号
    let goodsId = [[${goods.id}]];
    //商品库存
    let storage = [[${goods.storage}]];

    //购买商品数量加1
    $("#addSpan").click(function () {
        let amount = $("#amountInput").val();
        if (amount > storage) {
            alert("所购商品数量不能大于库存");
            return;
        }
        $("#amountInput").val(amount*1 + 1);
    })
</script>
</body>
</html>
标签：

相关文章