使用jQuery实现简单的购物车功能

使用jQuery实现简单的购物车功能

使用jQuery实现简单的购物车功能_第1张图片

<!DOCTYPE html>
<html>
  <head>
    <title>购物车</title>
    <meta charset="utf-8" />
	<!-- 引入jquery文件 -->
	<script src="js/jquery.min.js"></script>
	
    <style type="text/css">
      h1 {
        text-align:center;
      }
      table {
        margin:0 auto;
        width:60%;
        border:2px solid #aaa;
        border-collapse:collapse;
      }
      table th, table td {
        border:2px solid #aaa;
        padding:5px;
      }
    </style>
    <script type="text/javascript">
		
		//页面加载后执行
		$(function(){
			
			//为添加购物车按钮注册点击事件
			$("input[type='button'][value='加入购物车']").click(function(){
				
				var productName = $(this).parent().siblings("td:first").text();
				var price = $(this).parent().siblings("td:eq(1)").text();
				
				//判断库存
				var stockTd = $(this).parent().siblings("td:eq(3)");
				var stock = stockTd.text();
				if (stock == 0) {
					alert("已售完..")
					return;
				} else {
					stockTd.text(parseInt(stock)-1);
				}
				//判断是否重复添加
				var flag = false; // 不重复
				$(".productName").each(function(){
					var name = $(this).text();
					
					if (name == productName) { //重复了
						//修改数量
						var input = $(this).siblings("td:eq(1)").find("input:eq(1)");
						var oldNum = input.val();
						var newNum = parseInt(oldNum)+1;
						input.val(newNum);
						
						//修改金额
					    $(this).siblings("td:eq(2)").text(parseFloat(price)*newNum);
						
						//计算总金额
						totalMoney();
						
						flag = true;  //重复了 	
					}
					
				});
				
				if(flag) {
					return;
				}
				
				//组装一条数据
				var html = 	  ''+
							  ''+productName+''+
							  ''+price+''+
							  ''+
								''+
								''+
								''+
							  ''+
							  ''+price+''+
							  ''+
							   '';
				$("#goods").append(html);	
						
				//计算总金额	
				totalMoney();
			});	
			
		});
		

		//计算总金额
		function  totalMoney() {
			var money = 0;
			$(".moneyTd").each(function(){
				money += parseFloat($(this).text());
			});
			$("#total").text(money);	
		}
		
		//修改商品数据及金额
		function changeNum(num, btn) {
			
			//修改库存
			//获取购物车中的商品名称
			var productName = $(btn).parent().siblings("td:first").text();
			
			//获取购物车中商品数量
			var input = $(btn).parent().find("input:eq(1)");
			var oldNum =parseInt( input.val())  ;
			//标记
			var flag = true; //是否还有库存
			$("[name='productName']").each(function(){
				var pname = $(this).text();
				//当名称相同时执行操作
				if (productName == pname) {
					//获取库存中商品数量
					var stockTd = $(this).siblings("td:eq(2)");
					var stock = stockTd.text();
					//当库存为0时,不能再添加了
					if (stock == 0 && num ==1) {
						flag = false; //没有库存
					} else if(oldNum == 1 && num ==-1){
						flag = false; //没有库存
						}else{
							
						//改变库存数量
						stockTd.text(parseInt(stock)-num);
					}
					
				}
			});
			
			if(!flag) {
				return;
			}
			
			//当购物车中数量为0时,便不在减少
			if(oldNum == 0&& num ==-1 ){
				return ;
			}else{
				var newNum = parseInt(oldNum)+num;
			    input.val(newNum);
			}
			var tr = $(btn).parent().parent();
			
			var price = tr.find("td:eq(1)").text();
			
			tr.find("td:eq(3)").text(parseFloat(price)*newNum);
			
			//计算总金额	
			totalMoney();
		}

		//删除商品
		function del(btn) {
			if (confirm("确认删除此商品?")) {
				$(btn).parent().parent().remove();
			
			//获取购物车中的商品名称
			var productName = $(btn).parent().siblings("td:first").text();
			
			//获取购物车中商品数量
			var input = $(btn).parent().siblings("td:eq(2)").find("input:eq(1)");
			var Num = parseInt( input.val()) ;
			
			$("[name='productName']").each(function(){
				var pname = $(this).text();
				//当名称相同时执行操作
				if (productName == pname) {
					//获取库存中商品数量
					var stockTd = $(this).siblings("td:eq(2)");
					var stock = stockTd.text();
					//改变库存数量
					stockTd.text(parseInt(stock)+Num);
				}
			});
			}
			//计算总金额	
			totalMoney();
		}
		
		
    </script>
  </head>
  <body>
    <h1>真划算</h1>
    <table>
    <tr>
      <th>商品</th>
      <th>单价()</th>
      <th>颜色</th>
      <th>库存</th>
      <th>好评率</th>
      <th>操作</th>
    </tr>   
    <tr>
      <td name="productName">罗技M185鼠标</td>
      <td>80</td>
      <td>黑色</td>
      <td>6</td>
      <td>98%</td>
      <td align="center">
        <input type="button" value="加入购物车"/>
      </td>
    </tr>
    <tr>
      <td name="productName">微软X470键盘</td>
      <td>150</td>
      <td>黑色</td>
      <td>7</td>
      <td>96%</td>
      <td align="center">
        <input type="button" value="加入购物车"/>
      </td>
    </tr>
    <tr>
      <td name="productName">洛克iphone6手机壳</td>
      <td>60</td>
      <td>透明</td>
      <td>8</td>
      <td>99%</td>
      <td align="center">
        <input type="button" value="加入购物车"/>
      </td>
    </tr>
    <tr>
      <td name="productName">蓝牙耳机</td>
      <td>100</td>
      <td>蓝色</td>
      <td>10</td>
      <td>95%</td>
      <td align="center">
        <input type="button" value="加入购物车"/>
      </td>
    </tr>
    <tr>
      <td name="productName">金士顿U</td>
      <td>70</td>
      <td>红色</td>
      <td>9</td>
      <td>100%</td>
      <td align="center">
        <input type="button" value="加入购物车"/>
      </td>
    </tr>
    </table>
  
    <h1>购物车</h1>
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>单价()</th>
          <th>数量</th>
          <th>金额()</th>
          <th>删除</th>
        </tr>
      </thead>
	  
      <tbody id="goods">
        
        
      </tbody>
	  
	  
      <tfoot>
        <tr>
          <td colspan="3" align="right">总计</td>
          <td id="total">0</td>
          <td></td>
        </tr>
      </tfoot>
    </table>    
  </body>
</html>

你可能感兴趣的:(前端学习,javascript,jquery,前端)