美文网首页前端让前端飞
类似淘宝商品加减,价格跟着变

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

作者: 花花0825 | 来源:发表于2018-03-21 13:28 被阅读11次

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(); })

相关文章

网友评论

    本文标题:类似淘宝商品加减,价格跟着变

    本文链接:https://www.haomeiwen.com/subject/dtpwqftx.html