点击第一次,添加了样式,再次点击,没有反应,else没有起作用,感觉if判断的条件有问题但不会改
html部分
<div class="choice2">
<div><img src="../img/对号.png" class="duihao"/></div>
<img src="../img/保.png" />
<span id="red">云空间月卡 50G
<div>6元</div>
</span>
<p>主商品签收后,自动激活至下单帐号</p>
<h4>
<div> <img src="../img/对号.png" class="duihao"/></div>
我已阅读
<span>服务条款|常见问题</span>
</h4>
<h6>449元</h6>
</div>
js部分
var sos=document.getElementsByClassName("choice2")
function getStyle(dom, attr) {
if (dom.currentStyle) {
return dom.currentStyle[attr]
} else {
return getComputedStyle(dom)[attr]
}
}
for(var i in sos){
sos[i].onclick=function(){
var u = this.querySelectorAll('.duihao');
if(getStyle(u[0],"display")=="none"){
u[0].style.display="block";
u[1].style.display="block";
this.style.border="1px solid #ff6700";
this.querySelector('span').style.color="#ff6700"
}
else{
u[0].style.display.style.display="none";
u[1].style.display.style.display="none";
this.style.border="1px solid #e0e0e0";
this.querySelector('span').style.color="#333333"
}
}
}
else语句中的属性用错了,多了打了1次 .style.display,导致脚本出错了
u[0].style.display.style.display = "none";
u[1].style.display.style.display = "none";
去掉就可以了
<div class="choice2">
<div><img src="../img/对号.png" class="duihao" /></div>
<img src="../img/保.png" />
<span id="red">
云空间月卡 50G
<div>6元</div>
</span>
<p>主商品签收后,自动激活至下单帐号</p>
<h4>
<div> <img src="../img/对号.png" class="duihao" /></div>
我已阅读
<span>服务条款|常见问题</span>
</h4>
<h6>449元</h6>
</div>
<script>
var sos = document.getElementsByClassName("choice2");
function getStyle(dom, attr) {
if (dom.currentStyle) {
return dom.currentStyle[attr]
} else {
return getComputedStyle(dom)[attr]
}
}
for (var i in sos) {
sos[i].onclick = function () {
var u = this.querySelectorAll('.duihao');
if (getStyle(u[0], "display") == "none") {
u[0].style.display = "block";
u[1].style.display = "block";
this.style.border = "1px solid #ff6700";
this.querySelector('span').style.color = "#ff6700"
}
else {
u[0].style.display = "none";////////////
u[1].style.display = "none";/////////
this.style.border = "1px solid #e0e0e0";
this.querySelector('span').style.color = "#333333"
}
}
}
</script>