我是石家庄做网站的一名前端工程师,今天我给大家分享的demo是jq实现简单的购物车效果。希望这个demo希望对大家能有所帮助,我把代码贴到下面了。
效果图:
记得引入jquery
代码
样式
*{
margin: 0;padding: 0;
}
th,td{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
}
input{
width: 30px;
height: 20px;
}
Body
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr>
<td>小米5</td>
<td>3000</td>
<td><input type="button" class="jian" value="-" /> <span>0</span> <input type="button" class="jia" value="+" /></td>
<td class="xj">0</td>
<td><input type="button" class="sc" value="删除" /></td>
</tr>
<tr>
<td>三星s7</td>
<td>5000</td>
<td><input type="button" class="jian" value="-" /> <span>0</span> <input type="button" class="jia" value="+" /></td>
<td class="xj">0</td>
<td><input type="button" class="sc" value="删除" /></td>
</tr>
<tr>
<td>iphone7</td>
<td>6000</td>
<td><input type="button" class="jian" value="-" /> <span>0</span> <input type="button" class="jia" value="+" /></td>
<td class="xj">0</td>
<td><input type="button" class="sc" value="删除" /></td>
</tr><tr>
<td>华为9</td>
<td>4000</td>
<td><input type="button" class="jian" value="-" /> <span>0</span> <input type="button" class="jia" value="+" /></td>
<td class="xj">0</td>
<td><input type="button" class="sc" value="删除" /></td>
</tr>
<tr>
<td>oppo9</td>
<td>2500</td>
<td><input type="button" class="jian" value="-" /> <span>0</span> <input type="button" class="jia" value="+" /></td>
<td class="xj">0</td>
<td><input type="button" class="sc" value="删除" /></td>
</tr>
<tr>
<td>格力9</td>
<td>1000</td>
<td><input type="button" class="jian" value="-" /> <span>0</span> <input type="button" class="jia" value="+" /></td>
<td class="xj">0</td>
<td><input type="button" class="sc" value="删除" /></td>
</tr>
<tr>
<td colspan="5">合计:<span class="hj"></span></td>
</tr>
</table>
Js
<script type="text/javascript">
$(function () {
$(".sc").click(function () {
$(this).parent().parent().remove()
})
$(".jia").click(function () {
var $t=$(this).siblings("span").html()
$(this).siblings("span").html(++$t)
var xj=$(this).parent().prev().html()
$(this).parent().next().html(xj*$t)
})
$(".jian").click(function () {
var $r=$(this).next().html()
if ($r>0) {
$(this).next().html(--$r)
}
var xj1=$(this).parent().prev().html()
$(this).parent().next().html(xj1*$r)
})
$(":button").click(function () {
var tt=0;
$(".xj").each(function () {
tt+=parseInt($(this).text())
})
$(".hj").html(tt)
})
})
</script>
以上就是石家庄做网站的尚武科技π为大家分享的jq实现购物车效果的demo希望对各位小伙伴有所帮助。
如果大家对有什么技术方面的问题,可以关注石家庄做网站的尚武科技官方公众号“尚武科技π”,其中会有大量关于”互联网+”的相关的内容供大家互相学习了解,同时欢迎大家一起讨论技术问题。
通过以上内容的说明,大家对如何用jq实现购物车已经有了一定的了解。如果大家对这个功能有什么问题可以在尚武科技π留言,我们会在下期的文章更新中为您解答您的问题。
希望石家庄做网站的尚武科技做网站做的越来越好。
如果大家觉得尚武科技π写的文章对大家有用的话别忘了分享给朋友,万分感谢大家对尚武科技π的支持。