模拟radio 效果
实现插件效果可以复制,不会相互影响
css样式
.radio label{padding: 10px 5px;display: inline-block;cursor: pointer;}
.radio label span{width: 12px;height: 12px;display: inline-block;float: left;border-radius: 50%;border: 1px solid #9c9;}
.radio label p{float: left;line-height: 14px;font-size: 14px;padding: 0;margin: 0 0 0 12px;}
.radio label .xzl{width: 4px;height: 4px;border-width: 5px;border-color: #4b4;}
.radio label .ye{color: #4b4;}
html 代码
<div class="radio">
<label name="label">
<span></span>
<p>148</p>
</label>
<label name="label">
<span></span>
<p>256</p>
</label>
<label name="label">
<span></span>
<p>379</p>
</label>
<label name="label">
<span></span>
<p>425</p>
</label>
</div>
<script>
var rad= document.getElementsByClassName("radio");
for(var i=0;i<rad.length;i++){
var lab=rad[i].getElementsByTagName("label");
for(var j=0;j<lab.length;j++){
lab[j].onclick=function(){
//清除所有选中
var _rad=this.parentNode;
var _lab=_rad.getElementsByTagName('label');
for(var x=0;x<_lab.length;x++){
_lab[x].children[0].className="";
_lab[x].children[1].className="";
}
this.children[0].className="xzl";
this.children[1].className="ye";
}
}
}
</script>
在复制模块的时候,不同模块会相互影响,是因为清除选中的对象出错;