js购物车实现

最新推荐文章于 2024-09-05 23:05:05 发布

每當变幻時

最新推荐文章于 2024-09-05 23:05:05 发布

阅读量135

点赞数

分类专栏： javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/wd38693409/article/details/119698258

版权

javaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!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>
</head>
<body>
    <table id="tbl">
		<thead></thead>
		<tbody>
			<tr>
				<td>iphone6</td>
				<td>4488</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>4488</td>
			</tr>
			<tr>
				<td>iphone7</td>
				<td>5488</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>5488</td>
			</tr>
			<tr>
				<td>iphone8</td>
				<td>6488</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>6488</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">总计:</td>
				<td id="total">0</td>
			</tr>
		</tfoot>
	</table>
	
	<script type="text/javascript">
    //从Dom树中找到btn按钮，保存下来，现在保存下来是一个集合，因为没单独选下标
        var btn = document.getElementsByTagName('button');
    //遍历这个类数组，就能每次都得到一个数组里面的元素，从而不是集合就可以操作    
        for(var i=0;i<btn.length;i++){
    //从Dom树种找到保存商品小计的盒子，是包含在tbody标签里的        
            var yeye = document.getElementsByTagName('tbody')[0],
    //利用找到的盒子关系去找保存商品小计的父元素，                    
                parent = yeye.children;
    //利用小计的父元素可以找到它的儿子，因为是类数组有多个，所以需要遍历数组来获取到每一个单价的父元素            
                for(var x=0,sum=0;x<parent.length;x++){
    //用一个变量保存求和每个单价父元素的最后一个儿子的页面内容，还没点击，默认的价格总计                
                    sum+=parseInt(parent[x].lastElementChild.innerHTML); 
    //然后将保存求和的变量赋值给总价（总价用id，因为id在html中唯一，所以是个Dom树节点，可以直接操作
    //但是这里是计算用户没有+ -操作的总价，所以下面的分支结构if和else里面的代码完了也要计算                                   
                    total.innerHTML=sum;                    
                }
    //给每个button绑定点击事件
            btn[i].onclick=function(){
                
    /*单价为当前次点击元素的父亲的前一个兄弟，直接获取内容，就得到了单价
    因为+的操作和-的操作都要用到它，所以就把它放在外面，不放在if判断语句里*/                
                var dj = this.parentNode.previousElementSibling.innerHTML;
    //判断当前次点击事件的元素内容是不是+，如果是走里面这条路
                if(this.innerHTML=="+"){
    /*定义变量span等于当前次点击事件元素的Dom树里的前一个兄弟,
    这里不能直接获取它的页面内容，否则下面的计数操作就失效，因为获取的是它的内容，
    不是获取它的元素，获取的内容就没办法再给这个元素操作*/                
                    var span = this.previousElementSibling,                    
    //变量count保存住每点击一次 + ，span当前的html内容就+1；                
                    count = parseInt(span.innerHTML)+1;                    
    //然后把它赋值回span的html内容里面                
                    span.innerHTML=count;
    
    //直接把单价和计数相乘的结果赋值回小计，小计为当前次点击元素的父亲的后一个兄弟的页面内容
                    this.parentNode.nextElementSibling.innerHTML=count*dj;
    //根据上面if的判断，如果元素内容是不是+，则走这条路                
                }else{
    //定义变量span等于当前次点击事件元素的Dom树里的后一个兄弟                
                    var span = this.nextElementSibling,
    //变量count保存住每点击一次 - ，span当前的html内容就-1                
                    count = parseInt(span.innerHTML)-1;
    //判断count计数大于0，购物车不允许商品为0，或负数，则进入里面                
                    if(count>0){
    //如果count计数大于0，那么就将count的计算赋值回span的页面内容里面去                    
                        span.innerHTML=count;
    //计算当前计数值乘单价赋值给小计                    
                        this.parentNode.nextElementSibling.innerHTML=count*dj;
                    }                   
                }
    //根据if或else里面的操作看小计是否改变，改变了这里计算出总价            
                for(var x=0,sum=0;x<parent.length;x++){
                        sum+=parseInt(parent[x].lastElementChild.innerHTML);                    
                        console.log(sum)
                        total.innerHTML=sum;                    
                     }
            }
        }


	</script>
</body>
</html>