Jq實(shí)現(xiàn)簡單的購物車效果

發(fā)布時(shí)間：2018-12-26 熱度：

我是石家莊做網(wǎng)站的一名前端工程師，今天我給大家分享的demo是jq實(shí)現(xiàn)簡單的購物車效果。希望這個(gè)demo希望對(duì)大家能有所幫助，我把代碼貼到下面了。

效果圖：

記得引入jquery

代碼

樣式

margin: 0;padding: 0;

}

th,td{

width: 100px;

height: 50px;

line-height: 50px;

text-align: center;

}

input{

width: 30px;

height: 20px;

}

Body

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>iphone7</td>

</tr><tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

$(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>

以上就是石家莊做網(wǎng)站的尚武科技π為大家分享的jq實(shí)現(xiàn)購物車效果的demo希望對(duì)各位小伙伴有所幫助。

如果大家對(duì)有什么技術(shù)方面的問題，可以關(guān)注石家莊做網(wǎng)站的尚武科技官方公眾號(hào)“尚武科技π”，其中會(huì)有大量關(guān)于”互聯(lián)網(wǎng)+”的相關(guān)的內(nèi)容供大家互相學(xué)習(xí)了解，同時(shí)歡迎大家一起討論技術(shù)問題。

通過以上內(nèi)容的說明，大家對(duì)如何用jq實(shí)現(xiàn)購物車已經(jīng)有了一定的了解。如果大家對(duì)這個(gè)功能有什么問題可以在尚武科技π留言，我們會(huì)在下期的文章更新中為您解答您的問題。

希望石家莊做網(wǎng)站的尚武科技做網(wǎng)站做的越來越好。

如果大家覺得尚武科技π寫的文章對(duì)大家有用的話別忘了分享給朋友，萬分感謝大家對(duì)尚武科技π的支持。