Jquery仿美团外卖等食品选择页面购物车数量加减功能实现

最新推荐文章于 2023-02-16 18:51:52 发布

zx_001

最新推荐文章于 2023-02-16 18:51:52 发布

阅读量1w

点赞数 6

分类专栏： js web CSS

本文链接：https://blog.csdn.net/zx_001/article/details/72896238

版权

本文介绍了如何使用JQuery模仿美团外卖的食品选择页面，实现购物车中商品数量的加减功能。通过HTML定义按钮和显示区域，结合JQuery监听按钮点击事件，动态更新商品数量并展示。

摘要由CSDN通过智能技术生成

先上图：

HTML部分：

<div class="left_box">
        <ul>
           <li class="active">营养套餐</li>
           <li>酒水饮料</li>
           <li>酒水饮料</li>
           <li>酒水饮料</li>
        </ul>
    </div>
    <div class="right_box">
         <div style="padding:0 5px 25px;">
             <div class="pInfo">
                  <dl>
                     <dt><h3>商务套餐</h3></dt>
                     <dd><a href="#"><img src="/images/c01.jpg" /></a></dd>
                     <dd>
                         <em class="sale">
                             <b>特价</b>0.01元/份<br />
                             <del>15元/份</del>
                         </em>
                     </dd>
                     <dd class="btn">
                         <button class="minus">
                             <strong></strong>
                         </button>
                         <i>0</i>
                          <button class="add">
                             <strong></strong>
                         </button>
                         <i class="price">0.01</i