200字范文 > 【前端 HTML+CSS+JavaScript(JS)】DOM练习-购物车的实现 ~ElementSibling parentEl

【前端 HTML+CSS+JavaScript(JS)】DOM练习-购物车的实现 ~ElementSibling parentEl

时间：2021-06-19 17:00:54

效果：

总结：

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><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");//trvar newTdDom = document.createElement("td");//tdvar 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>

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

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。