jquery购物车添加功能

  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>
jquery购物车添加功能

猜你喜欢
