求助jquery关于购物车的问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

求助jquery关于购物车的问题

2016-05-31 22:29:34 2057 1

这个是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)
  • 吴孟桥
    2019-07-17 19:22:27

    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>
    0 0
相关问答

1

回答

jquery中的ajax的请求出现问题

2016-07-14 16:58:18 2038浏览量 回答数 1

1

回答

Jquery 的ajax方法在模态弹出窗口中不好使。

2016-07-06 10:41:02 1960浏览量 回答数 1

1

回答

jquery AJAX发送请求累积

2016-07-06 10:46:51 1695浏览量 回答数 1

1

回答

Jquery Ajax 事件如何绑定多个函数

2016-07-06 10:47:57 1465浏览量 回答数 1

1

回答

jquery ajax发送Post请求,如何添加请求头

2016-07-06 14:29:29 6974浏览量 回答数 1

1

回答

jquery ajax get 返回乱码

2016-07-06 14:47:44 1358浏览量 回答数 1

1

回答

jquery ajax问题

2016-07-06 14:52:07 1522浏览量 回答数 1

1

回答

jquery ajax 求教怎么总是弹出错误?

2016-07-06 15:58:25 1854浏览量 回答数 1

1

回答

问个jQuery无刷新评论的问题, $.ajax 提交获取不到数据

2016-07-06 16:02:40 1947浏览量 回答数 1

1

回答

jquery mobile ajax 请求,弹出提示框

2016-07-05 17:07:35 1908浏览量 回答数 1
+关注
0
文章
2240
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载