jquery购物车数量加减jquery
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<title>无标题文档</title>
<style>
p.p_num {
...
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<title>无标题文档</title>
<style>
p.p_num {
width: 78px;
height: 24px;
border-top: solid 1px #d0d0d0;
position: relative;
border-bottom: solid 1px #d0d0d0;
margin-top: -3px;
}
span.sy_minus,span.sy_plus {
width: 15px;
height: 24px;
line-height: 24px;
text-align: center;
display: block;
position: absolute;
top: 0px;
font-size: 14px;
border: solid 1px #d0d0d0;
background: #ebebeb;
cursor: pointer;
border-top: none;
border-bottom: none;
}
span.sy_minus {
left: 0px;
}
span.sy_plus {
right: 0px;
}
input.sy_num {
width: 44px;
height: 18px;
line-height: 24px;
text-align: center;
position: absolute;
top: 0px;
left: 17px;
}
span.sy_num {
padding: 5px 8px;
border: solid 1px #d0d0d0;
border-left: none;
border-right: none;
cursor: pointer;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready (function ()
{
var pl = $("p:last");
var reg = /(.*[\:\：]\s*)([\+\d\.]+)(\s*元)/g;
$ (".sy_minus").click (function ()
{
var me = $ (this), txt = me.next (":text"), pc = me.closest("p");
var val = parseFloat (txt.val ());
val = val < 1 ? 1 : val;
txt.val (val - 1);
var price = parseFloat (pc.prev("p").text().replace(reg,'$2')) * txt.val ();
pc.next("p").text (pc.next("p").text().replace(reg, "$1" + price + "$3"));
var sum = 0;
$(".p_num").next("p").each(function (i, dom)
{
sum += parseFloat ($(this).text().replace(reg, "$2"));
});
pl.text(pl.text().replace(reg, "$1" + sum + "$3"));
});
$(".sy_plus").click (function ()
{
var me = $ (this), txt = me.prev (":text"), pc = me.closest("p");
var val = parseFloat (txt.val ());
txt.val (val + 1);
var price = parseFloat (pc.prev("p").text().replace(reg,'$2')) * txt.val ();
pc.next("p").text (pc.next("p").text().replace(reg, "$1" + price + "$3"));
var sum = 0;
$(".p_num").next("p").each(function (i, dom)
{
sum += parseFloat ($(this).text().replace(reg, "$2"));
});
pl.text(pl.text().replace(reg, "$1" + sum + "$3"));
});
})[0].onselectstart = new Function ("return false");
</script>
</head>
<body>
<div class="">
<p class="">单价：36元</p>
<p class="p_num">
<span class="sy_minus" id="sy_minus_gid1">-</span>
<input class="sy_num" id="sy_num_gid1" readonly="readonly" type="text" name="number1" value="1" />
<span class="sy_plus" id="sy_plus_gid1">+</span>
</p>
<p class="">需支付：36元</p>
</div>
<div class="">
<p class="">单价：58元</p>
<p class="p_num">
<span class="sy_minus" id="sy_minus_gid2">-</span>
<input class="sy_num" id="sy_num_gid2" readonly="readonly" type="text" name="number1" value="1" />
<span class="sy_plus" id="sy_plus_gid2">+</span>
</p>
<p class="">需支付：58元</p>
</div>
<p class="">总共需要支付：94元</p>
</body>
</html>
<html>
<head>
<meta charset=UTF-8 />
<title>无标题文档</title>
<style>
p.p_num {
width: 78px;
height: 24px;
border-top: solid 1px #d0d0d0;
position: relative;
border-bottom: solid 1px #d0d0d0;
margin-top: -3px;
}
span.sy_minus,span.sy_plus {
width: 15px;
height: 24px;
line-height: 24px;
text-align: center;
display: block;
position: absolute;
top: 0px;
font-size: 14px;
border: solid 1px #d0d0d0;
background: #ebebeb;
cursor: pointer;
border-top: none;
border-bottom: none;
}
span.sy_minus {
left: 0px;
}
span.sy_plus {
right: 0px;
}
input.sy_num {
width: 44px;
height: 18px;
line-height: 24px;
text-align: center;
position: absolute;
top: 0px;
left: 17px;
}
span.sy_num {
padding: 5px 8px;
border: solid 1px #d0d0d0;
border-left: none;
border-right: none;
cursor: pointer;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready (function ()
{
var pl = $("p:last");
var reg = /(.*[\:\：]\s*)([\+\d\.]+)(\s*元)/g;
$ (".sy_minus").click (function ()
{
var me = $ (this), txt = me.next (":text"), pc = me.closest("p");
var val = parseFloat (txt.val ());
val = val < 1 ? 1 : val;
txt.val (val - 1);
var price = parseFloat (pc.prev("p").text().replace(reg,'$2')) * txt.val ();
pc.next("p").text (pc.next("p").text().replace(reg, "$1" + price + "$3"));
var sum = 0;
$(".p_num").next("p").each(function (i, dom)
{
sum += parseFloat ($(this).text().replace(reg, "$2"));
});
pl.text(pl.text().replace(reg, "$1" + sum + "$3"));
});
$(".sy_plus").click (function ()
{
var me = $ (this), txt = me.prev (":text"), pc = me.closest("p");
var val = parseFloat (txt.val ());
txt.val (val + 1);
var price = parseFloat (pc.prev("p").text().replace(reg,'$2')) * txt.val ();
pc.next("p").text (pc.next("p").text().replace(reg, "$1" + price + "$3"));
var sum = 0;
$(".p_num").next("p").each(function (i, dom)
{
sum += parseFloat ($(this).text().replace(reg, "$2"));
});
pl.text(pl.text().replace(reg, "$1" + sum + "$3"));
});
})[0].onselectstart = new Function ("return false");
</script>
</head>
<body>
<div class="">
<p class="">单价：36元</p>
<p class="p_num">
<span class="sy_minus" id="sy_minus_gid1">-</span>
<input class="sy_num" id="sy_num_gid1" readonly="readonly" type="text" name="number1" value="1" />
<span class="sy_plus" id="sy_plus_gid1">+</span>
</p>
<p class="">需支付：36元</p>
</div>
<div class="">
<p class="">单价：58元</p>
<p class="p_num">
<span class="sy_minus" id="sy_minus_gid2">-</span>
<input class="sy_num" id="sy_num_gid2" readonly="readonly" type="text" name="number1" value="1" />
<span class="sy_plus" id="sy_plus_gid2">+</span>
</p>
<p class="">需支付：58元</p>
</div>
<p class="">总共需要支付：94元</p>
</body>
</html>
最新评论
热门推荐
我要评论