jquery购物车添加功能
程序员文章站
2022-04-11 08:54:07
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>
上一篇： AI怎么掏空五角星?