<script> $(function(){ $(".add").click(function(){ var t=$(this).parent().find('input[class*=text_box]'); t.val(parseInt(t.val())+1) setTotal(); }) $(".min").click(function(){ var t=$(this).parent().find('input[class*=text_box]'); t.val(parseInt(t.val())-1) if(parseInt(t.val()) < 0){ t.val(0); } setTotal(); }) function setTotal(){ var s=0; $(".gm").each(function(){ s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text()); }); $("#total").html(s.toFixed(2)); } setTotal(); }) </script>
html代码是随便先写出来的 没做调整
<div class="gm"> <p style="font-family:'微软雅黑';font-size:16px;color:#333333;margin-top:25px;">Quantity</p> <span class="price" style="display:none;">199</span> <input class="add" name="" type="button" value="+" style="margin-top:-25px;float:right;width:30px;height:30px;border:1px solid #d8d8d8;background-color:#ffffff;" /> <input class="text_box" name="" type="text" value="1" style="margin-top:-25px;float:right;height:30px;width:30%;border:1px solid #d8d8d8;"/> <input class="min" name="" type="button" value="-" style="margin-top:-25px;float:right;width:30px;height:30px;border:1px solid #d8d8d8;background-color:#ffffff;"/> <img src="img/jinbicopy.png"style="width:25px;" alt=""><label id="total" style="color:#fba929;font-family:'微软雅黑';margin-top:20px;margin-left:5px;"></label> <button type="button" style="margin-top:10px;color:#ffffff;font-size:17px;margin-bottom:15px;line-height:40px;width:95%;height:40px;text-align:center;margin-left:2.5%;border-radius:2px;border:1px solid #FBA929;background-color:#fba929">Submit</button> <button type="button" style="color:#ffffff;font-size:17px;margin-bottom:15px;line-height:40px;width:95%;height:40px;text-align:center;margin-left:2.5%;border-radius:2px;border:1px solid #999999;background-color:#999999">Cancel</button> </div>