欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery购物车添加功能

程序员文章站 2022-07-04 19:51:27
1 2 3 4 5 6 14 15 16 17 18 19 java 20 21 单价... ......
  1 <html>
  2     <head>
  3         <meta charset="UTF-8">
  4         <title></title>
  5         <script type="text/javascript" src="js/jquery-1.7.2.js" ></script>
  6         <style>
  7             input{
  8                 width: 25px;
  9             }
 10             li{
 11                 list-style: none;
 12             }
 13         </style>
 14     </head>
 15     <body>
 16         
 17         <ul>
 18             <li>
 19                 <div>java</div>
 20                 <div style="display: inline-block;">
 21                     单价:<span id="price_store1" style="margin: 20px;">50.00</span>
 22                     库存:<span id="java_store1" style="margin: 20px;">100</span>
 23                 </div> 
 24                 <div style="display: inline-block;">
 25                     <button id="store1">-</button>
 26                     <input type="text" id="input_store1" value="0" />
 27                     <button id="_store1">+</button>
 28                 </div>
 29             </li>
 30             <li>
 31                 <div>Javascript</div>
 32                 <div style="display: inline-block;">
 33                     单价:<span id="price_store2" style="margin: 20px;">30.00</span>
 34                     库存:<span id="java_store2" style="margin: 20px;">100</span>
 35                 </div> 
 36                 <div style="display: inline-block;">
 37                     <button id="store2">-</button>
 38                     <input type="text" id="input_store2" value="0" />
 39                     <button id="_store2">+</button>
 40                 </div>
 41             </li>
 42             <li>
 43                 <div>MyQSL</div>
 44                 <div style="display: inline-block;">
 45                     单价:<span id="price_store3" style="margin: 20px;">60.00</span>
 46                     库存:<span id="java_store3" style="margin: 20px;">100</span>
 47                 </div> 
 48                 <div style="display: inline-block;">
 49                     <button id="store3">-</button>
 50                     <input type="text" id="input_store3" value="0" />
 51                     <button id="_store3">+</button>
 52                 </div>
 53             </li>
 54             <li>
 55                 <div>Oracle</div>
 56                 <div style="display: inline-block;">
 57                     单价:<span id="price_store4" style="margin: 20px;">55.00</span>
 58                     库存:<span id="java_store4" style="margin: 20px;">100</span>
 59                 </div> 
 60                 <div style="display: inline-block;">
 61                     <button id="store4">-</button>
 62                     <input type="text" id="input_store4" value="0" />
 63                     <button id="_store4">+</button>
 64                 </div>
 65             </li>
 66             <li>
 67                 <div>jQuery</div>
 68                 <div style="display: inline-block;">
 69                     单价:<span id="price_store5" style="margin: 20px;">40.00</span>
 70                     库存:<span id="java_store5" style="margin: 20px;">100</span>
 71                 </div> 
 72                 <div style="display: inline-block;">
 73                     <button id="store5">-</button>
 74                     <input type="text" id="input_store5" value="0" />
 75                     <button id="_store5">+</button>
 76                 </div>
 77             </li>
 78             <li>
 79                 <div>html</div>
 80                 <div style="display: inline-block;">
 81                     单价:<span id="price_store6" style="margin: 20px;">15.00</span>
 82                     库存:<span id="java_store6" style="margin: 20px;">100</span>
 83                 </div> 
 84                 <div style="display: inline-block;">
 85                     <button id="store6">-</button>
 86                     <input type="text" id="input_store6" value="0" />
 87                     <button id="_store6">+</button>
 88                 </div>
 89             </li>
 90         </ul>
 91         <li>
 92                 总计:<span id="qty_store">0</span>件商品
 93                 总价:<span id="total_store">0</span>元
 94             </li>
 95 
 96     </body>
 97     <script>
 98         $.each($("input"), function(i,n) {
 99             n.disabled = "disabled";
100         });
101         var bt = $("button");
102         $("button:even").on('click',function(){
103             $("#java_" + this.id).text(parseInt($("#java_" + this.id).text()) + 1);
104             $("#input_" + this.id).val(parseInt($("#input_" + this.id).val()) - 1);
105             $("#qty_store").text(parseInt($("#qty_store").text()) - 1);
106             $("#total_store").text(parseInt($("#total_store").text()) - parseInt($("#price_" + this).text()));
107             
108         });
109         $("button:odd").on('click',function(){
110             $("#java" + this.id).text(parseInt($("#java" + this.id).text()) - 1);
111             $("#input" + this.id).val(parseInt($("#input" + this.id).val()) + 1);
112             $("#qty_store").text(parseInt($("#qty_store").text()) + 1);
113             $("#total_store").text(parseInt($("#price" + this.id).text()) + parseInt($("#total_store").text()));
114         });
115     </script>
116 </html>