【前端 HTML+CSS+JavaScript(JS)】DOM练习-购物车的实现 ~ElementSibling parentElement children 事件的绑定与带注释/总结

最新推荐文章于 2022-09-04 00:04:59 发布

_小鹰

最新推荐文章于 2022-09-04 00:04:59 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签：前端 javascript css html

本文链接：https://blog.csdn.net/cc2855816075/article/details/122992564

版权

前端专栏收录该内容

38 篇文章 1 订阅

订阅专栏

效果：

在这里插入图片描述

总结：

1、event.target和this似乎一致，自行查阅。
2、绑定事件方法：在带有括号（需要传参）时，一定要在外面带上引号，因为不加引号的话意为直接调用函数。

<input type="button" value="-" onclick="sub(event)" class="subBtns">

3、css中的类属性为class，在js中设置dom元素的class要使用className，其他的例如border-color要改为驼峰规则borderColor。
4、事件的绑定与解绑方法：
①

subBtnsDoms[i].onclick = null;	//解绑
				//这没办法传this
				// subBtnsDoms[i].onclick = sub;	//绑定

②

plusBtnsDoms[i].onclick = function(event){	//第一种绑定的法一
					var num = event.target.previousElementSibling;
						++num.value;
					num.parentElement.nextElementSibling.innerText =parseFloat(num.parentElement.nextElementSibling.innerText) + parseFloat(num.parentElement.previousElementSibling.innerText);
				}

5、.previousElementSibling .nextElementSibling .parentElement
Node.childNodes
Element.children
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
		/* *{
			border: 1px solid #000;
		} */
        #b-box{
            text-align: center;
            border: 1px solid #000;
        }
        #tb0 tr td{
            text-align: center;
            border: 1px solid #000;
        }
		#tb0{
			margin: 0px auto;
		}
		#quantity{
			width: 20px;
		}
		.d1{
			margin-top: 20px;
		}
		.d1 input[type='button']{
			margin-left: 280px;
		}
		
    </style>
</head>
<body>
    <div id="b-box">
        <div class="d1">
            商品名称：
            <input type="text" />
        </div class="d1">

        <div class="d1">
            商品价格：
            <input type="text" />
        </div>

        <div class="d1">
            购买数量：
            <input type="text" />
        </div>

        <div class="d1">
            <input type="button" value="添加" onclick="addGood()"/>
        </div>

		<hr /> 

        <div>
            <h2>购物车</h2>
        </div>

        <div>
            <table id="tb0">
                <tr id="tr0">
                    <td><input type="checkbox" name="" id=""></td>
                    <td><h3>名称</h3></td>
                    <td><h3>价格</h3></td>
                    <td><h3>数量</h3></td>
                    <td><h3>小计</h3></td>
                    <td><h3>操作</h3></td>
                </tr>

                <tr>
                    <td><input type="checkbox" name="" id="" class="ckBoxes"></td>
                    <td>《如何征服英俊少男》</td>
                    <td>888.0</td>
                    <td>
						<!-- ★★★这个this务必带上★★★ -->
                        <input type="button" value="-" onclick="sub(event)" class="subBtns">
                        <input type="text" name="" id="quantity" value="10">
                        <input type="button" value="+" onclick="plus(event)" class="plusBtns">
                    </td>
                    <td>8880.0</td>
                    <td><input type="button" value="删除" onclick="del(event)" class="delBtns"></td>
                </tr>
            </table>
            <div>
                <hr />
                <br />
                总价：<label id="totalPrice">8880.0</label>
                <input type="button" value="提交订单" onclick="sbmt(event)"/>
            </div>
        </div>
    </div>
	
	<script type="text/javascript">
		function addGood(){
			var calDom = document.getElementById("totalPrice");
			
			var ifmtsDom = document.querySelectorAll(".d1 input[type='text']");
			var newTrDom = document.createElement("tr");	//tr
			var newTdDom = document.createElement("td");	//td
			var newTdDom1 = document.createElement("td");
			var newTdDom2 = document.createElement("td");
			var newTdDom3 = document.createElement("td");
			
			var newCkDom = document.createElement("input");
			var newSubDom = document.createElement("input");
			var newPlusDom = document.createElement("input");
			var newQuaDom = document.createElement("input");
			var newSbttDom = document.createElement("td");
			
			var newDelBtnDom = document.createElement("input");	//删除
			var newDelTdDom = document.createElement("td");
			
			newCkDom.className = "ckBoxes";//checkbox类名设置
			
			newSubDom.type = "button";
			newSubDom.value = "-";
			//设置name试试看
			
			newSubDom.className = "subBtns";
			
			newPlusDom.type = "button";
			newPlusDom.value = "+";
			//★★★class和className一定要注意★★★
			newPlusDom.className = "plusBtns";
			
			newQuaDom.type = "text";
			newQuaDom.style.width = "20px";
			
			newDelBtnDom.type = "button";
			newDelBtnDom.value = "删除";
			newDelBtnDom.className = "delBtns";
			newDelTdDom.appendChild(newDelBtnDom);
			
			var targetTbDom = document.getElementById("tb0");
			newCkDom.type = "checkbox";
			newTdDom.appendChild(newCkDom);
			newTrDom.appendChild(newTdDom);
			
			//如何优化？数组？ 循环？晚点看
			newTdDom1.innerText = ifmtsDom[0].value;
			newTdDom2.innerText = ifmtsDom[1].value;
			newTdDom3.appendChild(newSubDom);
			newQuaDom.value = ifmtsDom[2].value;
			newTdDom3.appendChild(newQuaDom);
			newTdDom3.appendChild(newPlusDom);
			
			newTrDom.appendChild(newTdDom1);
			newTrDom.appendChild(newTdDom2);
			newTrDom.appendChild(newTdDom3);
			//小计功能也可以绑定两个函数
			newSbttDom.innerText = parseFloat(ifmtsDom[1].value) * parseFloat(ifmtsDom[2].value);
			newTrDom.appendChild(newSbttDom);	//小计
			
			newTrDom.appendChild(newDelTdDom);
			
			targetTbDom.appendChild(newTrDom);
			
			calDom.innerText = parseFloat(calDom.innerText) + parseFloat(newSbttDom.innerText);
			
			//下面开始配置 数量加减 按钮功能
			var subBtnsDoms = document.querySelectorAll(".subBtns");
			var plusBtnsDoms = document.querySelectorAll(".plusBtns");
			//别忘记点！！ .......
			var delBtnsDoms = document.querySelectorAll(".delBtns");
			
			// console.log(delBtnsDoms);//调试问题代码
			
			for(var i = 0; i < subBtnsDoms.length; i++){
				// console.log(subBtnsDoms);
				subBtnsDoms[i].onclick = null;	//解绑
				//这没办法传this
				// subBtnsDoms[i].onclick = sub;	//绑定
				//注意时click！！！！！！
				
				//如何解决addEventListener动态绑定时无法传参的问题？？优化？？
				subBtnsDoms[i].onclick = function(event){	//第一种绑定的法一
					var num = event.target.nextElementSibling;
					if(num.value > 1){
						--num.value;
						num.parentElement.nextElementSibling.innerText =parseFloat(num.parentElement.nextElementSibling.innerText) - parseFloat(num.parentElement.previousElementSibling.innerText);
					}
						
				}
			}
			
			for(var i = 0; i < plusBtnsDoms.length; i++){
				plusBtnsDoms[i].onclick = null;
				plusBtnsDoms[i].onclick = function(event){	//第一种绑定的法一
					var num = event.target.previousElementSibling;
						++num.value;
					num.parentElement.nextElementSibling.innerText =parseFloat(num.parentElement.nextElementSibling.innerText) + parseFloat(num.parentElement.previousElementSibling.innerText);
				}
			}
			
			for(var i = 0; i < delBtnsDoms.length; i++){	//删除按钮绑定事件
				delBtnsDoms[i].onclick = null;
				delBtnsDoms[i].onclick = function(event){	//第一种绑定的法一
					event.target.parentElement.parentElement.remove();
				}
			}
		}
		function sub(event){	//减按钮 事件
			//注意用法！！！
			var num = event.target.nextElementSibling;
			if(num.value > 1){
				--num.value;
				num.parentElement.nextElementSibling.innerText =parseFloat(num.parentElement.nextElementSibling.innerText) - parseFloat(num.parentElement.previousElementSibling.innerText);
			}
		}
		
		function plus(event){	//加按钮 事件
			//注意用法！！！
			var num = event.target.previousElementSibling;
			++num.value;
			num.parentElement.nextElementSibling.innerText =parseFloat(num.parentElement.nextElementSibling.innerText) + parseFloat(num.parentElement.previousElementSibling.innerText);
		}
		
		function del(event){	//删除按钮 事件
			event.target.parentElement.parentElement.remove();
		}
		
		function sbmt(event){	//提交按钮 事件
			var ckedDoms = document.querySelectorAll(".ckBoxes");
			
			// console.log(ckedDoms);
			
			event.target.previousElementSibling.innerText = parseFloat(0);
			for(var i = 0; i < ckedDoms.length; i++){
				if(ckedDoms[i].checked == true){
					var subTt = parseFloat(ckedDoms[i].parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerText);
					event.target.previousElementSibling.innerText = parseFloat(event.target.previousElementSibling.innerText) + parseFloat(subTt);
				}
			}
			alert("提交成功！总价格为" + event.target.previousElementSibling.innerText + "元。");
		}
	</script>
</body>
</html>

_小鹰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端 HTML+CSS+JavaScript(JS)】DOM练习-购物车的实现 ~ElementSibling parentElement children 事件的绑定与带注释/总结

效果：总结：1、event.target和this似乎一致，自行查阅。2、绑定事件方法：在带有括号（需要传参）时，一定要在外面带上引号，因为不加引号的话意为直接调用函数。<input type="button" value="-" onclick="sub(event)" class="subBtns">3、css中的类属性为class，在js中设置dom元素的class要使用className，其他的例如border-color要改为驼峰规则borderColor。4、事件的绑
复制链接

扫一扫