基于JQuery的购物车添加删除以及结算功能

最新推荐文章于 2023-08-30 21:53:10 发布

VIP文章 zljvsmx

最新推荐文章于 2023-08-30 21:53:10 发布

阅读量2.9k

点赞数 2

分类专栏：电商功能文章标签： jquery html 购物车

本文链接：https://blog.csdn.net/zljvsmx/article/details/60770327

版权

前段时间了解到购物车结算算是一个难点部分，在网上也找了一些，但是网上除了插件之外，就是一些半成品，比如一部分只有添加删除效果，另一部分只有结算功能，很少见到整合在一起的购物车效果，因此自己写了一个，方便大家查看

（添加效果没有飞入，实在懒得写动画效果了，凑合看吧）

HTML部分

<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title></title>
      <link rel="stylesheet" href="css/index.css">
      <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
      <script src="js/index.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
      <div id="banner"></div>
      <div id="container">
      	<ul>
      		<li num="1"><img src="images/1.jpg"/><span class="things_name">2014年春季爆品A</span><p>$<i>10</i><span class="buy">点击购买</span></p></li>
      		<li num="2"><img src="images/2.jpg"/><span class="things_name">2014年春季爆品B</span><p>$<i>20</i><span class="buy">点击购买</span></p></li>
      		<li num="3"><img src="images/3.jpg"/><span class="things_name">2014年春季爆品C</span><p>$<i>30</i><span class="buy">点击购买</span></p></li>
      		<li num="4"><img src="images/4.jpg"/><span class="things_name">2014年春季爆品D</sp