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