<style type="text/css">
.box{
width: 600px;
margin: 0 auto;
}
span{
border: 3px solid #ccc;
padding: 6px;
margin-right: 10px;
}
p{
line-height: 60px;
}
.on{
border: 3px solid orange;
}
</style>
</head>
<body>
<div class="box">
<div>
<p>
尺码：
<span class="on">s</span>
<span>m</span>
<span>l</span>
</p>
</div>
<div>
<p>
颜色：
<span class="on">黑</span>
<span>白</span>
<span>灰</span>
</p>
</div>
<div>
<p id="package">
套餐：
<span class="on">送衣服</span>
<span>送鞋子</span>
<span>送帽子</span>
</p>
</div>
<div>价格：￥<i id="priceTxt">59</i></div>
</div>
<script type="text/javascript">
var span =document.querySelectorAll('span');
var spanLen=span.length;
var package=document.getElementById('package');
// 找到package下面的span
var packageSpan=package.getElementsByTagName('span');
var priceTxt=document.getElementById('priceTxt');
for(var i=0;i<spanLen;i++){
span[i].οnclick=function(){
// 先清除所在行的class-----所在行是一个数组，要循环把所有数据的clas类清空
var s =this.parentNode.children;
s.className='';
for(var i=0;i<s.length;i++){
s[i].className='';
}
// 给点击的原添加class
this.className='on';
// 判断点击的一行是否是套餐
if(this.parentNode.id=='package'){
fun()
}
}
}
// 改变套餐时,下面的加个也需要改变
function fun(){
var price=0;
for(var j=0;j<packageSpan.length;j++){
if(packageSpan[j].className=='on'){
switch(j){
case 0:
price=59;
break;
case 1:
price=69;
break;
case 2:
price=79;
break;
}
}
}
priceTxt.innerText=price
console.log(price)
}
</script>
109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
