2 qq 26061039 qq_26061039 于 2015.06.11 10:51 提问

JQuery关于购物车的问题

这个是JQuery的代码。

 <script type="text/javascript">
$(function(){
 $("#quantity").keyup(function(){
  if(isNaN($(this).val()) || parseInt($(this).val())<1){
   $(this).val("1");
   $("#totalPrice").html($("#price").val());
   return;
  }
  var total = parseFloat($("#price").val())*parseInt($(this).val());
  $("#totalPrice").html(total.toFixed(2));
 })

})
/*商品数量+1*/
function numAdd(){
 var num_add = parseInt($("#quantity").val())+1;
 if($("#quantity").val()==""){
  num_add = 1;
 }
 $("#quantity").val(num_add);
 var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
 $("#totalPrice").html(total.toFixed(2));
}
/*商品数量-1*/
function numDec(){
 var num_dec = parseInt($("#quantity").val())-1;
 if(num_dec<1){
  //购买数量必须大于或等于1
  alert("not lt 1");
 }else{
  $("#quantity").val(num_dec);
  var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
  $("#totalPrice").html(total.toFixed(2));
 }
}
</script>

这个是JSP里面的代码

     for(int i=0;i<cartquantity;i++)
        {
            String cartproduct_id=productidlist.get(i).toString();
            GetsSingleInfoFromProduct gsifp=new GetsSingleInfoFromProduct();
            String cartproduct_name=gsifp.getSingleProductName(cartproduct_id);
            String cartproduct_type=gsifp.getSingleProductType(cartproduct_id);
            float cartproduct_price=Float.parseFloat(productpricelist.get(i).toString());
    %>
    <table cellpadding="0" cellspacing="0" class="gwc_tb2" id="tab">
        <tr>
            <td class="tb2_td2"><a href="Single-<%out.println(cartproduct_id);%>.jsp"><img src="images/<%out.println(cartproduct_id);%>.jpg"/></a></td>
            <td class="tb2_td3"><a href="Single-<%out.println(cartproduct_id);%>.jsp"><%out.println(cartproduct_name);%></a></td>
            <td class="tb1_td4"><%out.println(cartproduct_type);%></td>
            <td class="tb1_td5">
                <span  id="min" style=" width:20px; height:18px;border:1px solid #ccc;" onclick="numDec()"/>-</span>
                <input id="quantity" class="product_quentity" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;"/>
                <span  id="add" style="width:20px; height:18px;border:1px solid #ccc;" onclick="numAdd()"/>+</span>
            </td>
            <td class="tb1_td6"><input id="price" class="productprice" style="color:#ff5500;font-size:14px; font-weight:bold;" value="<%=cartproduct_price%>"></td>
            <td class="tb1_td7"><a href="#">删除</a></td>
        </tr>
    </table>
        <%} %>
    <table cellpadding="0" cellspacing="0" class="gwc_tb3" >
        <tr>
            <td class="tb3_td2">已选商品 <label id="shuliang" style="color:#ff5500;font-size:14px; font-weight:bold;"><%out.print(cartquantity);%></label> 件</td>
            <td class="tb3_td3">合计(不含运费):<span>¥</span><span style=" color:#ff5500;"><span id="totalPrice" style="color:#ff5500;font-size:14px; font-weight:bold;"></span></span></td>
            <td class="tb3_td4"><span id="jz1">结算</span><a href="#" style=" display:none;"  class="jz2" id="jz2">结算</a></td>
        </tr>
    </table>
问题是我现在只对查询出的第一条结果有作用,后来想到动态生成的话id重复了,但
使用class去求和的话还是有问题

1个回答

showbo
showbo   Ds   Rxr 2015.06.11 12:01

id不能重复,用样式选择器,然后改为dom关系操作

 <table cellpadding="0" cellspacing="0" class="gwc_tb2" id="tab">
        <tr>
            <td class="tb2_td2"><a href="Single-<%out.println(cartproduct_id);%>.jsp"><img src="images/<%out.println(cartproduct_id);%>.jpg"/></a></td>
            <td class="tb2_td3"><a href="Single-<%out.println(cartproduct_id);%>.jsp"><%out.println(cartproduct_name);%></a></td>
            <td class="tb1_td4"><%out.println(cartproduct_type);%></td>
            <td class="tb1_td5">
                <span  id="min" style=" width:20px; height:18px;border:1px solid #ccc;" onclick="numDec(this)"/>-</span><!--传入DOM对象--->
                <input id="quantity" class="product_quentity" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;"/>
                <span  id="add" style="width:20px; height:18px;border:1px solid #ccc;" onclick="numAdd(this)"/>+</span><!--传入DOM对象--->
            </td
        <td class="tb1_td6"><input id="price" class="productprice" style="color:#ff5500;font-size:14px; font-weight:bold;" value="<%=cartproduct_price%>"></td>
        <td class="tb1_td7"><a href="#">删除</a></td>
    </tr>
</table>
  <script type="text/javascript">
         $(function () {
             $("input.product_quentity").keyup(function () {
                 var price = $(this).closest('table').find('input.productprice');//同个table的price控件
                 if (isNaN($(this).val()) || parseInt($(this).val()) < 1) {
                     $(this).val("1");
                     $("#totalPrice").html(price.val());
                     return;
                 }
                 var total = parseFloat(price.val()) * parseInt($(this).val());
                 $("#totalPrice").html(total.toFixed(2));
             })

         })
         /*商品数量+1*/
         function numAdd(o) {
             var quantity = $(o).closest('table').find('input.product_quentity'), price = $(this).closest('table').find('input.productprice'); ;
             var num_add = parseInt(quantity.val()) + 1;
             if (quantity.val() == "") {
                 num_add = 1;
             }
             quantity.val(num_add);
             var total = parseFloat(price.val()) * parseInt(quantity.val());
             $("#totalPrice").html(total.toFixed(2));
         }
         /*商品数量-1*/
         function numDec(o) {
             var quantity = $(o).closest('table').find('input.product_quentity'), price = $(this).closest('table').find('input.productprice'); ;
             var num_dec = parseInt(quantity.val()) - 1;
             if (num_dec < 1) {
                 //购买数量必须大于或等于1
                 alert("not lt 1");
             } else {
                 quantity.val(num_dec);
                 var total = parseFloat(price.val()) * parseInt(quantity.val());///////
                 $("#totalPrice").html(total.toFixed(2));
             }
         }
</script>
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
一个面试题购物车
一套关于购物车的面试题,只是没有答案哦,自己保存用的
面试常问的购物车原理
php写购物车(思路&源码) 本文介绍一个php实现的购物车代码,功能实现完整,具有一定的参考价值 这里我们为你提供个简单的php购物车代码,从增加购物产品与发生购买了,在商城开发中,这个功能是少不了的 具体分析如下: 对购物车里商品的操作大体上有以下几个:添加商品,删除商品,以及提交订单; 方法本质是:把session存入array,对array进行增加、删除、修改操作
已解决,关于加入购物车飞入效果的jquery.fly.js插件
我页面上有个position:fixed;的div,从这里面点击加入购物车飞出一个到顶部的 position:fixed;的header里面,这个div在页面下拉的时候是不动的,header也是不动的,这时候有个问题:在页面没有下拉的时候,抛物线正常(能从div到header),页面下拉的时候抛物线就会整体下移,现在还没搞清楚原因,动画代码如下: var offset = $(".destina
京东校招前端笔试题:购物车问题
题目考点是使用原生的js实现在表格中动态添加列,并且统计每列的结果;还有一个考点就是使用事件代理删除点击的该行. html:     名称价格操作             产品110.00删除         产品230.20删除         产品320.50删除         总计60.70(3件商品) 问题:实现增加add(items)和删除bind()
利用jquery.fly实现仿淘宝购物车飞入特效
学习在于积累,今天利用jquery.fly实现仿淘宝购物车飞入特效,虽然实现起来简单,但实际使用时有一堆坑需要注意。结合实际项目经验,我简单的总结了一下到底有哪些坑需要去填。参考网址:github:https://github.com/amibug/fly从以上网址下载js文件即可使用。一:载入页面 <script src="../lib/jquery/dist/jquery.min.js"
jquery做的购物车(效果非常好)
jquery做的购物车,效果不错,分享一下,希望对各位有用
JavaScript、JQuery简单实现购物车功能
食用前先导入JQuery文件 购物车 h1 { text-align:center; } table { margin:0 auto; width:40%; border:2px solid #aaa; border-collapse:coll
简单购物车jQuery实现
一个简单的使用jQuery实现的单页面购物车效果,可以实现添加到购物车,删除,数量和金额的增减,和合计金额的计算 等效果
jQuery简单实现购物车添加删除操作
注:示例仅是简单实现,只写body部分内容,未对jQuery文件进行导入。// <body> <table border="1" cellpadding="0" cellspacing="0"> <tr> <td><label><input type='checkbox'/>全选</label></td> <td>商品信息<
jQuery添加到购物车的互动
插件描述:当用户决定购买某件物品的浮动购物车交互效果。 演示地址:http://www.jq22.com/jquery-info8244