前端让前端飞

类似淘宝商品加减,价格跟着变

2018-03-21  本文已影响11人  花花0825

html:

<table id="tab">

<tr>

<td>

    <span>单价:</span><span class="price">1.50</span>

    <input class="min" name="" type="button" value="-" />

<input class="text_box" name="" type="text" value="1" />

<input class="add" name="" type="button" value="+" />

</td>

</tr>

<tr>

<td>

<span>单价:</span><span class="price">3.95</span>

<input class="min" name="" type="button" value="-" />

<input class="text_box" name="" type="text" value="1" />

<input class="add" name="" type="button" value="+" /> 

</td>

</tr>

</table>

<p>总价:<label id="total"></label></p>

js:

$(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; $("#tab td").each(function(){ s+=parseInt($(this).find('input[class*=text_box]').val()) *parseFloat($(this).find('span[class*=price]').text()); }); $("#total").html(s.toFixed(2)); } setTotal(); })

上一篇 下一篇

猜你喜欢

热点阅读