在学习jQuery时做一个作业,效果是点击按钮会出一个小圆点并且到达右上的购物车区域以示“添加购物车动画”,并且购物车数字显示+1,但是我的代码运行时,如果连续按了2下button(或者更多),数字加1就不会执行(不连续就能正常运行效果),请问各位论坛大佬帮忙看看如何修改代码
```<!DOCTYPE html>
我的购物车
<br> .purchase{<br> width: 150px;<br> height: 30px;<br> border: 1px solid #f0f0f0;<br> color: #2e9b2e;<br> line-height: 30px;<br> text-align: center;<br> margin-top: 50px;<br> float: right;<br> display: block;</p> <pre><code> } .count{ width: 30px; height: 30px; border: 1px solid #fd8824; background-color: #fd8824; float: right; color: #fff; line-height: 30px; text-align: center; } .btn{ width: 200px; height: 50px; background-color: #3daa46; border: 0px; float: left; margin-top: 300px; margin-left: 300px; } .radius{ width: 16px; height: 16px; background: red; position: fixed; left: 0px; top: 0px; border-radius: 50%; display: none; } </style> <script type="text/javascript" src="js/uncompressed.js"></script> <script type="text/javascript"> $(function(){ var pur = $('.purchase'); var count = $('.count'); var btn = $('.btn'); var radius = $('.radius'); btn.click(function(){ var op01 = btn.offset(); var op02 = count.offset(); radius.css({left:op01.left+btn.outerWidth()/2-radius.outerWidth()/2,top:op01.top+btn.outerHeight()/2-radius.outerHeight()/2}); radius.show(); radius.stop().animate({ 'left':op02.left+count.outerWidth()/2-radius.outerWidth()/2, 'top':op02.top+count.outerHeight()/2-radius.outerHeight()/2 },800,function(){ radius.hide(); var count1 = count.html(); count.html(parseInt(count1)+1); }) }) }); </script> </code></pre> <p></head><br> <body><br> <div class="purchase">我的购物车<br> <div class="count">0</div><br> </div><br> <input type="button" name="" value="添加商品到我的购物车" class="btn"><br> <div class="radius"></div></p> <p></body><br> </html></p> <pre><code></code></pre>