jQuery實現(xiàn)購物車多物品數(shù)量的加減+總價計算
更新時間：2014年06月06日 09:41:35 作者：
這篇文章主要介紹了jQuery實現(xiàn)購物車多物品數(shù)量的加減+總價計算,需要的朋友可以參考下
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery實現(xiàn)購物車多物品數(shù)量的加減+總價計算</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<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;
$("#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();
})
</script>
</head>
<body>
<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>
</body>
</html>
相關(guān)文章
jQuery是用來干什么的 jquery其實就是一個js框架
jQuery是一bai個簡潔而快速的JavaScript庫，可用于du簡化zhi事件處理，HTML文檔遍歷，Ajax交互和dao動畫，以更快速開發(fā)網(wǎng)站2021-02-02
這篇文章主要介紹了jQuery解析json數(shù)據(jù)的具體實現(xiàn)方法,結(jié)合實例形式較為詳細(xì)的分析了jQuery解析json格式數(shù)據(jù)的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
下面小編就為大家?guī)硪黄猨Query基本選擇器(實例及表單域value的獲取方法)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jquery.cookie.js 操作cookie實現(xiàn)記住密碼功能的實現(xiàn)代碼
jquery.cookie.js操作cookie實現(xiàn)記住密碼功能，很簡單很強大，喜歡的朋友可以參考下。2011-04-04
jquery ajax提交表單數(shù)據(jù)的兩種方式
貌似AJAX越來越火了，作為一個WEB程序開發(fā)者要是不會這個感覺就要落伍，甚至有可能在求職的時候?qū)冶惶蕴Ｎ乙彩且粋€WEB程序開發(fā)者，當(dāng)然我也要“隨波逐流”一把，不然飯碗不保?。?2009-11-11
在項目開發(fā)過程中，經(jīng)常會遇到帶有彈窗的頁面，尤其是在移動端。下面通過本文給大家分享jQuery實現(xiàn)彈窗下底部頁面禁止滑動效果，需要的朋友參考下吧2017-12-12
屬性的類型可以為：圖片、文本框、按鈕，然后選擇需要設(shè)置的屬性值：src、width、height、title、value等等，具體實現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05
validate插件是一個基于jquery的表單驗證插件了里面有許多的常用的一些驗證方法我們可以直接調(diào)用，具體的我們一起來看看2016-01-01
這篇文章主要介紹了JQuery表單元素取值賦值方法總結(jié),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
今回給大家介紹個圓形旋轉(zhuǎn)的效果，基于圓形的物理特性，又圓上任意一點可以作為一個控制按鈕，然后拖動它來使圖片輪換。2011-01-01