购物车 如何实现数量增加，小计，合计，总数JSP中页面的变化

样式的调节：

body里的代码

	

		

			
				
你未购买任何产品
			
			<%--如果购物车有购物项，就应该把购物项的信息显示给用户--%>
			
				
						
							

					

						

							
产品图片
							
商品信息
							
单价
							
数量
							
金额
							
操作
						
					
					
					

						
						

								
								
${item.productImage}
								

							
									
${item.productName}
								
								
${item.price}
								￥
								

								

									
									

										
										
										
										
										
									
								
								
${item.price*item.productNum}￥
								
								
删除
							
						
					
				
			
		

		

			
			

				已选商品 0 件
				 合计 :  ￥0.00
				結算
			
		

			

引入的外部文件：

用js操作：

	//减号操作
	 $(".numberMinus").click(function () {
                var num = $(this).siblings(".textNum").val();  //获取数量框里的数值
                //单价的值
                var productPrice=$(this).parent().parent().prev().children("span").text();
           
                num--;  //单击“-”减号时，数量递减
                if(num<=0){
                	$(this).prop("disabled", true);
                }
                
                $(this).siblings(".textNum").val(num); //把数量变化后的新值放入数量框中
              	//小计的值
                 $(this).parent().parent().next().children("span").text(num*productPrice);
           	totalPrice();		//调用总价方法
            totalNum();	//合计数
	 })
	//加号操作
	$(".numberPlus").click(function(){
		 var num = $(this).siblings(".textNum").val();  //获取数量框里的数值
         //单价的值
         var productPrice=$(this).parent().parent().prev().children("span").text();
    
         num++;  //单击“+”减号时，数量递减
         if(num>0){
         $(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和数量的变化，存取到数据库，以及删除的操作