html菜鸟，请教大加如何实现这个功能
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>酒店购物</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport"
content="width=device-width, minimum-scale=1, maximum-scale=1" />
<link rel="stylesheet"
href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css" />
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script
src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
<style type="text/css">
* {
font-size: 18px;
}
.shangping {
font-size: 18px;
font-weight: bold;
}
.jine {
font-size: 24px;
font-weight: bold;
color: #FF9900;
text-align: right;
}
.ui-block-c {
text-align: right
}
.num {
border: 1px solid #d6d6d6;
vertical-align: middle;
padding-left: 5px;
padding-right: 5px;
margin: 0px;
text-align: center;
margin: 0px -6px 0px -6px;
}
.image_input {
width: 36px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//数量递减
$("#type0").click(function() {
var oldRoomsCount = parseInt($("#num_1").val());
if (oldRoomsCount == 1) {
return;
}
oldRoomsCount--;
$("#num_1").text(oldRoomsCount);
/* refreshTotalAmount(); */
});
//数量递增
$("#type1").click(function() {
var oldRoomsCount = parseInt($("#num_1").val());
oldRoomsCount++;
$("#num_1").text(oldRoomsCount);
/* refreshTotalAmount(); */
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="content" style="margin: 3% 2%; padding: 0px;">
<div class="ui-grid-b">
<div class="ui-block-a" style="width: 30%;">
<img src="image/3.png" style="width: 80px; height: 80px;" />
</div>
<div class="ui-block-b" style="width: 40%;">
<div>
<strong>精品软白沙</strong>
</div>
<div
style="background-image: url(image/1.gif); width: 7%; color: #FF0000; font-size: 8px; text-align: center">
特价
</div>
<div
style="color: #FF6600; font-size: 18px; font-weight: bold; margin-top: 15px;">￥12/包</div>
</div>
<div class="ui-block-c" style="width: 30%;">
<div style="margin-top: 20px; border: 1px solid red;">
<input type="image" src="redu.png" class="image_input type0"
id="1" /> <span id="num_1"
style="text-align: center; border: 1px solid #999; vertical-align: :50%; line-height: 20px; height: 20px;">0</span>
<input type="image" src="add.png" class="image_input type1" id="1" />
</div>
</div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a" style="width: 30%;">
<img src="image/3.png" style="width: 80px; height: 80px;" />
</div>
<div class="ui-block-b" style="width: 40%;">
<div>
<strong>精品软白沙</strong>
</div>
<div
style="background-image: url(image/1.gif); width: 7%; color: #FF0000; font-size: 8px; text-align: center">
新品
</div>
<div
style="color: #FF6600; font-size: 18px; font-weight: bold; margin-top: 15px;">￥12/包</div>
</div>
<div class="ui-block-c" style="width: 30%;">
<div style="margin-top: 20px; border: 1px solid red;">
<input type="image" src="redu.png" class="image_input type0"
id="2" /> <span id="num_1"
style="text-align: center; border: 1px solid #999; vertical-align: 50%; line-height: 20px; height: 20px;">0</span>
<input type="image" src="add.png" class="image_input type1" id="2" />
</div>
</div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a" style="width:30%">
<img src="image/3.png" style="width:80px;height:80px"/>
</div>
<div class="ui-block-b" style="width:40%">
<div><strong>精品软白沙</strong>
</div>
<div style="background-image:url(image/1.gif);width:7%; color:#FF0000; font-size:8px; tell-align: center">
热卖
</div>
<div style="color:#FF6600; font-size:18px; font-weight:bold;magin-top:15px;">￥12/包</div>
</div>
<div class="ui-block-c" style="width:30%">
<div style="margin-top:20px; border:1px solid red;">
<input type="image" src="redu.png" class="image_input type0"
id="3"/>
<span id="num_1" style="text-align:center; bord:1px solid #999; vertical-align:50%; line-height:20px; heirht:20px;"/>0
<input type="image" src="add.png" class="image_input type1"id="3"/>
</div>
</div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a" style="width:30%">
<img src="image/3.png" style="width:80px;height:80px"/>
</div>
<div class="ui-block-b" style="width:40%">
<div><strong>精品软白沙</strong>
</div>
<div style="background-image:url(image/1.gif);width:7%; color:#FF0000; font-size:8px; tell-align: center">
推荐
</div>
<div style="color:#FF6600; font-size:18px; font-weight:bold;magin-top:15px;">￥12/包</div>
</div>
<div class="ui-block-c" style="width:30%">
<div style="margin-top:20px; border:1px solid red;">
<input type="image" src="redu.png" class="image_input type0"
id="4"/>
<span id="num_1" style="text-align:center; bord:1px solid #999; vertical-align:50%; line-height:20px; heirht:20px;"/>0
<input type="image" src="add.png" class="image_input type1"id="4"/>
</div>
</div>
</div>
</div>
<div class="ui-grid-a"
style="background-color: #FF9A14; height: 60px; margin: 0px; padding: 0px;">
<div class="ui-block-a"
style="color: FFFFFF; height: 60px; line-height: 60px; padding-left: 5%; font-size: 16px;">购物车
</div>
<div class="ui-block-b" align="right">
<input type="image" src="image/12.jpg" style="height: 60px;"
value="结算" />
</div>
</div>
</div>
</body>
</html>
希望在这个网页中实现结算物品的总价和现实购物车物品数量
你这个页面代码贴的眼中有问题啊，我还原不出来！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css" />
* { font-size: 18px; } .shangping { font-size: 18px; font-weight: bold; } .jine { font-size: 24px; font-weight: bold; color: #FF9900; text-align: right; } .ui-block-c { text-align: right } .num { border: 1px solid #d6d6d6; vertical-align: middle; padding-left: 5px; padding-right: 5px; margin: 0px; text-align: center; margin: 0px -6px 0px -6px; } .image_input { width: 36px; } $(document).ready(function() { //ÊýÁ¿µÝ¼õ $("#type0").click(function() { var oldRoomsCount = parseInt($("#num_1").val()); if (oldRoomsCount == 1) { return; } oldRoomsCount--; $("#num_1").text(oldRoomsCount); /* refreshTotalAmount(); */ }); //ÊýÁ¿µÝÔö $("#type1").click(function() { var oldRoomsCount = parseInt($("#num_1").val()); oldRoomsCount++; $("#num_1").text(oldRoomsCount); /* refreshTotalAmount(); */ }); });
¾«Æ·Èí°×ɳ
<div
style="background-image: url(image/1.gif); width: 7%; color: #FF0000; font-size: 8px; text-align: center">
ÌؼÛ
</div>
<div
style="color: #FF6600; font-size: 18px; font-weight: bold; margin-top: 15px;">£¤12/°ü</div>
</div>
<div class="ui-block-c" style="width: 30%;">
<div style="margin-top: 20px; border: 1px solid red;">
<input type="image" src="redu.png" class="image_input type0"
id="1" /> <span id="num_1"
style="text-align: center; border: 1px solid #999; vertical-align: :50%; line-height: 20px; height: 20px;">0</span>
<input type="image" src="add.png" class="image_input type1" id="1" />
</div>
</div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a" style="width: 30%;">
<img src="image/3.png" style="width: 80px; height: 80px;" />
</div>
<div class="ui-block-b" style="width: 40%;">
<div>
<strong>¾«Æ·Èí°×ɳ</strong>
</div>
<div
style="background-image: url(image/1.gif); width: 7%; color: #FF0000; font-size: 8px; text-align: center">
ÐÂÆ·
</div>
<div
style="color: #FF6600; font-size: 18px; font-weight: bold; margin-top: 15px;">£¤12/°ü</div>
</div>
<div class="ui-block-c" style="width: 30%;">
<div style="margin-top: 20px; border: 1px solid red;">
<input type="image" src="redu.png" class="image_input type0"
id="2" /> <span id="num_1"
style="text-align: center; border: 1px solid #999; vertical-align: 50%; line-height: 20px; height: 20px;">0</span>
<input type="image" src="add.png" class="image_input type1" id="2" />
</div>
</div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a" style="width:30%">
<img src="image/3.png" style="width:80px;height:80px"/>
</div>
<div class="ui-block-b" style="width:40%">
<div><strong>¾«Æ·Èí°×ɳ</strong>
</div>
<div style="background-image:url(image/1.gif);width:7%; color:#FF0000; font-size:8px; tell-align: center">
ÈÈÂô
</div>
<div style="color:#FF6600; font-size:18px; font-weight:bold;magin-top:15px;">£¤12/°ü</div>
</div>
<div class="ui-block-c" style="width:30%">
<div style="margin-top:20px; border:1px solid red;">
<input type="image" src="redu.png" class="image_input type0"
id="3"/>
<span id="num_1" style="text-align:center; bord:1px solid #999; vertical-align:50%; line-height:20px; heirht:20px;"/>0
<input type="image" src="add.png" class="image_input type1"id="3"/>
</div>
</div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a" style="width:30%">
<img src="image/3.png" style="width:80px;height:80px"/>
</div>
<div class="ui-block-b" style="width:40%">
<div><strong>¾«Æ·Èí°×ɳ</strong>
</div>
<div style="background-image:url(image/1.gif);width:7%; color:#FF0000; font-size:8px; tell-align: center">
ÍƼö
</div>
<div style="color:#FF6600; font-size:18px; font-weight:bold;magin-top:15px;">£¤12/°ü</div>
</div>
<div class="ui-block-c" style="width:30%">
<div style="margin-top:20px; border:1px solid red;">
<input type="image" src="redu.png" class="image_input type0"
id="4"/>
<span id="num_1" style="text-align:center; bord:1px solid #999; vertical-align:50%; line-height:20px; heirht:20px;"/>0
<input type="image" src="add.png" class="image_input type1"id="4"/>
</div>
</div>
</div>
</div>
<div class="ui-grid-a"
style="background-color: #FF9A14; height: 60px; margin: 0px; padding: 0px;">
<div class="ui-block-a"
style="color: FFFFFF; height: 60px; line-height: 60px; padding-left: 5%; font-size: 16px;">¹ºÎï³µ
</div>
<div class="ui-block-b" align="right">
<input type="image" src="image/12.jpg" style="height: 60px;"
value="½áËã" />
</div>
</div>
上面代码我还原出来的，但是样子还是不对。。。我就不截图了
选择器用错了，html标签页没结束。。最后2个项的span没有结束标准，要补上
$(document).ready(function () {
//数量递减
$(".type0").click(function () {
var span = $(this).next();
var oldRoomsCount = parseInt(span.text()) || 0;
if (oldRoomsCount <= 1) {
return;
}
oldRoomsCount--;
span.text(oldRoomsCount);
/* refreshTotalAmount(); */
});
//数量递增
$(".type1").click(function () {
var span = $(this).prev();
var oldRoomsCount = parseInt(span.text()) || 0;
oldRoomsCount++;
span.text(oldRoomsCount);
/* refreshTotalAmount(); */
});
});