给class属性添加多个值(jq与js实现方法对比)
实现效果:
html标签:
<ul id="test">
<li>1</li>
<li>2</li>
</ul>
jQuery代码:
<script type="text/javascript">
$.each($('#test >li'),function(i,val){
$(this).click(function(){
$(this).addClass('name3').siblings().removeClass('name3');
})
})
</script>
javascript代码:
<script type="text/javascript">
var li=document.getElementById('test').getElementsByTagName('li');
for(i=0;i<li.length;i++){
li[i].argue=i;
li[i].onclick=function(){
var argue=this.argue;
for(j=0;j<li.length;j++){
if(argue==j){
this.className.indexOf('name3')!=-1?'':this.className+=' name3';
}else{
li[j].className.indexOf('name3')!=-1?li[j].className=li[j].className.slice(0,-6):'';
}
}
}
}
</script>
从上面代码可看出,jq给class属性添加多个值的实现方法比原生js简易许多,这正是jquery所说的"white less ,do more".
0条评论( 网友:0 条,站长:0 条 ) 网友评论{有您的评论更精彩....}