JQuery初学:在购物车中小计商品价格
repeater中有三个控件(两个Label,一个TextBox),两个Label分别用于显示单价和小计价格,TextBox用于让用户改变商品数量。
<td >
<%-- 商品单价--%>
<asp:Label ID="price" runat="server"><%# Eval("price") %></asp:Label></td>
<td>
<%--商品数量--%>
<asp:TextBox ID="TextBox1" Width="20px" runat="server" Text='<%# Eval("num") %>'></asp:TextBox></td>
<td>
<%--价格小计--%>
<asp:Label ID="count" runat="server"></asp:Label></td>
JQuery代码:
<script type="text/javascript" src="jquery/jquery-1.5.js"></script>
<script type="text/javascript">
//初始价格
$(function(){
$("input[type=text]").each(function(i){
var num=$(this).val();
var price=parseFloat($("span[id$='price']:eq("+i+")").text());
$("span[id$='count']:eq("+i+")").text(function(){
return (num*price).toFixed(2);})
})
})
//改变数量后价格
$(function(){
$("input[type=text]").each(function(i){
$(this).blur(function(){
var price=parseFloat($("span[id$='price']:eq("+i+")").text());
var num=$(this).val();
$("span[id$='count']:eq("+i+")").text(function(){
return (num*price).toFixed(2);})
})
})
})

浙公网安备 33010602011771号