（6）--jQuery简易购物车

最新推荐文章于 2023-02-02 23:48:46 发布

xyxNJFU

最新推荐文章于 2023-02-02 23:48:46 发布

阅读量599

点赞数

分类专栏：移动应用开发

本文链接：https://blog.csdn.net/x_____yx/article/details/81159460

版权

移动应用开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车</title>
<link type="text/css" rel="stylesheet" href="css/goods.css" />
</head>

<body>
<!--商品显示区域-->
<div>
	<!--商品-->
    <div class="good">
        <img src="image/1.jpg" id="img1"/>
        <label id="lb1">vans</label>
        <div class="ordnum">数量:<input type="number" id="num1"/></div>
        <button class="addbtn" id="add1" onclick="addGood(this)">加入购物车</button>
        <input type="hidden" value="good1" id="hid1"/>
    </div>
    <div class="good">
        <img src="image/2.jpg" id="img2"/>
        <label id="lb2">Onitsuka Tiger</label>
        <div class="ordnum">数量:<input type="number" id="num2"/></div>
        <button class="addbtn" id="add2" onclick="addGood(this)">加入购物车</button>
        <input type="hidden" value="good2" id="hid2"/>
    </div>
    <div class="good">
        <img src="image/3.jpg" id="img3"/>
        <label id="lb3">allStar</label>
        <div class="ordnum">数量:<input type="number" id="num3"/></div>
        <button class="addbtn" id="add3" onclick="addGood(this)">加入购物车</button>
        <input type="hidden" value="good3" id="hid3"/>
    </div>
    <div class="good">
        <img src="image/4.jpg" id="img4"/>
        <label id="lb4">Yeezy</label>
        <div class="ordnum">数量:<input type="number" id="num4"/></div>
        <button class="addbtn" id="add4" onclick="addGood(this)">加入购物车</button>
        <input type="hidden" value="good4" id="hid4"/>
    </div>
    </tr>
</div>
	<table id="tb1">
		<thread>
			<tr>
                <td>选择</td>
                <td>商品</td>
                <td>数量</td>
                <td>操作</td>
			</tr>
	</table>
    <button id="delSelected">删除</button>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
		function addGood(obj){
			var btnid =  $(obj).attr("id");
			var index = btnid.substring(3,btnid.length);
			var src = $("#img"+index).attr("src");
			var title = $("#lb"+index).html();
			var num = $("#num"+index).val();
			var goodid = $("#hid"+index).val();
			if(check(goodid)){
				if(num==""){
					var i=1;
					num=i++;
				}
				update(goodid,parseInt(num));
			}else{
				if(num==""){
					var i=1;
					num=i++;
				}
				add(src,title,num,goodid);
			}
		}
		function update(goodid,num){
			var str="input[type='checkbox'][value='"+goodid+"']";
			var trx=$(str).parent().parent();
			var oldnum=parseInt($(trx).find("input[type='number']").val());
			$(trx).find("input[type='number']").val(oldnum+num);
		}
		//判断函数
		function check(goodid){
			var chkList=$("input[type='checkbox']");
			var i;
			for(i=0; i < chkList.length; i++){
				if(goodid ==chkList[i].value){
					return true;
				}
			}
			return false;
		}
		function add(src,title,num,goodid){
			var nodeStr = "<tr>"
						+ "<td><input type='checkbox' value='"+goodid+"'></td>"
						+ "<td><img class='imgtd' src='"+src+"'>"+title+"</td>"
						+ "<td><input type='number' click='checkNum(this)' value='"+ num +"'></td>"
						+ "<td><button onclick='delGood(this)'>x</button></td>"
						+"</tr>"
		    $("#tb1").append(nodeStr);
		}
			//单行删除 动态绑定
			function delGood(obj){
				 $(obj).parent().parent().remove();	
		}
		$("#delSelected").click(function(){
			$("input[type='checkbox']:checked").parents("tr").remove();
		});
		//监测购物车物品数量为0时，自动删除本行
		function checkNum(obj){
			var num=parseInt($(obj).find("input[type='number']").val());
			console.log('num:',num);
			if(num<1){
				delGood(obj);
			}
		}
	</script>
</body>
</html>

操作jQuery对象：

https://blog.csdn.net/wakaka_cy/article/details/80803858

xyxNJFU

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
（6）--jQuery简易购物车

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;me
复制链接

扫一扫