购物车 如何实现数量增加，小计，合计，总数JSP中页面的变化 |
您所在的位置：网站首页 › jsp商品详情页 › 购物车 如何实现数量增加，小计，合计，总数JSP中页面的变化 |
购物车 如何实现数量增加，小计，合计，总数JSP中页面的变化
|
样式的调节： div.cartDiv { max-width: 1013px; margin: 10px auto; color: black; } table.cartProductTable { width: 100%; font-size: 12px; } tr.cartProductItemTR { border: 1px solid #CCCCCC; } tr.cartProductItemTR td { padding: 20px 20px; } table.cartProductTable th { font-weight: normal; color: #3C3C3C; padding: 20px 20px; } img.cartProductImg { padding: 1px; border: 1px solid #EEEEEE; width: 80px; height: 80px; } table.cartProductTable th.selectAndImage { width: 100px; } div.cartProductLinkOutDiv { position: relative; } a.cartProductLink { color: #3C3C3C; } a.cartProductLink:hover { color: #C40000; text-decoration: underline; } div.cartProductLinkInnerDiv { position: absolute; bottom: 0; height: 20px; } span.cartProductItemPrice { color: #9C9C9C; display: block; font-size: 14px; } span.cartProductItemPromotionPrice { font-family: Arial; font-size: 14px; font-weight: bold; color: #C40000; } div.cartProductChangeNumberDiv { border: solid 1px #E5E5E5; width: 80px; } div.cartProductChangeNumberDiv a { width: 14px; display: inline-block; text-align: center; color: black; text-decoration: none; } div.cartProductChangeNumberDiv input { border: solid 1px #AAAAAA; width: 23px; display: inline-block; } span.cartProductItemSumPrice { font-family: Arial; font-size: 14px; font-weight: bold; color: #C40000; } img.cartProductItemIfSelected, img.selectAllItem { cursor: pointer; } body { font-size: 12px; font-family: Arial; } div.cartDiv { max-width: 1013px; margin: 10px auto; color: black; } div.cartTitle button { background-color: #AAAAAA; border: 1px solid #AAAAAA; color: white; width: 53px; height: 25px; border-radius: 2px; } span.cartTitlePrice { color: #C40000; font-size: 14px; font-weight: bold; margin-left: 5px; margin-right: 3px; } div.cartFoot { background-color: #E5E5E5; line-height: 50px; margin: 20px 0px; color: black; padding-left: 20px; } div.cartFoot button { background-color: #AAAAAA; border: 0px solid #AAAAAA; color: white; height: height%; width: 120px; height: 50px; font-size: 20px; text-align: center; } span.cartSumNumber { color: #C40000; font-weight: bold; font-size: 16px; } span.cartSumPrice { color: #C40000; font-weight: bold; font-size: 20px; }body里的代码 你未购买任何产品 产品图片 商品信息 单价 数量 金额 操作引入的外部文件： 用js操作： //减号操作 $(".numberMinus").click(function () { var num = $(this).siblings(".textNum").val(); //获取数量框里的数值 //单价的值 var productPrice=$(this).parent().parent().prev().children("span").text(); num--; //单击“-”减号时，数量递减 if(num0){ $(this).siblings(".numberMinus").prop("disabled", false); } $(this).siblings(".textNum").val(num); //把数量变化后的新值放入数量框中 //小计的值 $(this).parent().parent().next().children("span").text(num*productPrice); totalPrice(); //调用总价方法 totalNum(); //合计数 }) //计算总价方法 function totalPrice(){ //计算总价，编写总价方法 var zong = 0; $(".cartProductItemSumPrice").each(function () { var all = parseInt($(this).text()); zong += all; }) $("#Sum").text(zong); } //计算数量方法 function totalNum(){ //计算总价，编写总价方法 var sumNum = 0; $(".textNum").each(function () { var all = parseInt($(this).val()); sumNum += all; }) $("#cartSumNumber").text(sumNum); } //加载页面时，调用总价方法 $(function(){ totalNum(); totalPrice(); //调用总价方法 }) function deleteInfo(){ swal({title: "删除提示", //弹出框的title text: "确定删除吗？", //弹出框里面的提示文本 type: "warning", //弹出框类型 showCancelButton: true, //是否显示取消按钮 confirmButtonColor: "#DD6B55",//确定按钮颜色 cancelButtonText: "取消",//取消按钮文本 confirmButtonText: "是的，确定删除！"//确定按钮上面的文档 }).then(function(isConfirm) { if (isConfirm) { window.location="car?action=delete&userId=1&carListId=1&productId=1"; } }); }技术难点： jqery中siblings方法是遍历同级元素，刚开始的时候没有理解，获取单价的时候没有获取到，需要.parent().parent()找到外部td，通过prev()找到上一级的td，单价在td里面，children（“span”）标签，.text获取到值，同理小计也是，因为这是JSTL循环遍历出来的，但是下面统计数量和总价不是循环出来，可以设置特有的id，直接通过（“#id”）.val()设置值和获取值， $(".cartProductItemSumPrice").each(function () { var all = parseInt($(this).text()); zong += all; }) $("#Sum").text(zong);each方法遍历，直接取值 疑问：当产品数量变化，后台怎么获取对应的产品Id和数量的变化，存取到数据库，以及删除的操作 |
【本文地址】
今日新闻 |
推荐新闻 |