购物车js思路（未封装版）

最新推荐文章于 2025-05-02 04:08:11 发布
雨中风铃清酒微凉
最新推荐文章于 2025-05-02 04:08:11 发布
阅读量217
点赞数
文章标签： javascript 开发语言 ecmascript
本文链接：https://blog.youkuaiyun.com/caicaizi3/article/details/126431774
版权
<head>
	<title>使用Selector API实现购物车客户端计算</title>
	<meta charset="utf-8" />
	<style>
		table {
			width: 600px;
			text-align: center;
			border-collapse: collapse;
		}
		
		td,
		th {
			border: 1px solid black
		}
		
		td[colspan="3"] {
			text-align: right;
		}
		/*tbody>tr>td:last-child{background-color:red}*/
		/*tfoot>tr>td:last-child{background-color:red}*/
	</style>
	<!--<script src="js/6_2.js"></script>-->
</head>

<body>
	<table id="data">
		<thead>
			<tr>
				<th>商品名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>iPhone6</td>
				<td>4488</td>
				<td>
					<button>-</button>
					<!--this指当前事件所在的元素对象
	  何时使用: 如果事件处理中需要使用当前元素对象-->
					<span>1</span>
					<button>+</button>
				</td>
				<td>4488</td>
			</tr>
			<tr>
				<td>iPhone6 plus</td>
				<td>5288</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>5288</td>
			</tr>
			<tr>
				<td>iPad Air 2</td>
				<td>4288</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>4288</td>
			</tr>
			<tr>
				<td>RTX 3060ti</td>
				<td>3000</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>3000</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">Total: </td>
				<td id="total">0</td>
			</tr>
		</tfoot>
	</table>
	<script type="text/javascript">
		//首先获取所有的按钮
        var btns=document.getElementsByTagName("button");
		//因为要个每个按钮都添加点击事件，所以这里先遍历
        for(var i=0;i<btns.length;i++){
			//给每个按钮添加点击事件
            btns[i].onclick=function(){
				//判断按钮类型，做出不同的功能
                if(this.innerHTML=="+"){
					//价格=数量*单价，所以这里来获取数量
                    var span=this.previousElementSibling; //这里不能直接获取span的innerHTML，不然span改变后的值就无法获取了
					//用一个值来存储数量，按钮点一次数量加一，所以这里做一个加法
                    var spanV=parseInt(span.innerHTML)+1; //span.innerHTML获取的值是字符串，所以这里转换一个数据类型，不然会变成字符串的拼接
					//将加后的数量再赋值给span，让它显示在页面上
                    span.innerHTML=spanV;
					//获取价格
                    var price=this.parentNode.previousElementSibling.innerHTML; /*这里因为后面要进行计算，所以我们直接获取他的内容,
                                                                                  这里要注意获取的值与this的关系，不要写错了！！！
                                                                                */
					//这里获取小计，把价格*单价赋值给小计
                    this.parentNode.nextElementSibling.innerHTML=price*spanV;
                }else{
					//思路同上
                    var span=this.nextElementSibling;
                    var spanV=parseInt(span.innerHTML)-1;
                    if(spanV>0){
                        span.innerHTML=spanV;
                        var price=this.parentNode.previousElementSibling.innerHTML;
                        this.parentNode.nextElementSibling.innerHTML=price*spanV;
                    }
                }
                /*获取总额记得要在点击事件里面，为了获取改变后的价格并相加，二是如果不在点击事件里面而和点击事件同级，会无限循环*/
				//获取总额要先获取每个小计，所以这里先获取tbody，再通过tbody获取tr
				//获取tbody
                var tbody=document.getElementsByTagName("tbody")[0]; //下标******非常重要记得写！！这是一个类集合***不写下标就获取不到trs
				//获取tr
                var trs=tbody.children;/*这里不能直接在children后面加上lastElementChild来获取商品价格,因为x.children获取到的是一个集合，
                                        所以加上lastElementChild后获取到的是undefined，而不是我们想要的价格  
                                      */
				//因为tr拿出来是一个类集合，所以需要遍历
                for(var i=0,sum=0;i<trs.length;i++){ //这里的循环是因为trs是一个集合
					//这里每一个小计都是一个一个遍历的，所以创建一个sum用来装小计并计算得到总额
                    sum+=parseInt(trs[i].lastElementChild.innerHTML);
                }
				//将总额赋值给页面中的总额
                total.innerHTML=sum;
            }
        }
		//这里再加一个获取总额是为了后续追加商品时不再需要改动总额，所以总额在html中写为0，具体在这里计算并赋值
        var tbody=document.getElementsByTagName("tbody")[0];  
            var trs=tbody.children;  
            for(var i=0,sum=0;i<trs.length;i++){  
                sum+=parseInt(trs[i].lastElementChild.innerHTML);
            }
        total.innerHTML=sum;
	</script>
</body>