请教jquery循环每个ico的问题
0
悬赏园豆：5
[已解决问题]
解决于 2013-03-04 11:51
html代码:
<dl>
<dt><a><i class="clIco"></i>服装鞋帽</a></dt>
<dd>
<a>女装</a>
<a>男装</a>
<a>童装</a>
<a>运动品牌</a>
</dd>
</dl>
<dl>
<dt><a><i class="itIco"></i>电脑办公</a></dt>
<dd>
<a>女装</a>
<a>男装</a>
<a>童装</a>
<a>运动品牌</a>
</dd>
</dl>
.....
css代码：
.clIco{ width:9px; height:5px; background:url(../images/clIco.png) no-repeat;}
.clIcoCur{ background:url(../images/clIcoCur.png) no-repeat;}
.itIco{ width:9px; height:5px; background:url(../images/itIco.png) no-repeat;}
.itIcoCur{ background:url(../images/itIcoCur.png) no-repeat;}
jquery代码怎么写，需要的效果是鼠标移到相应的dl上时其对应的Ico变成相应的IcoCur,比如第一个dl的图标是clIco（服装鞋帽的），当鼠标移到服装鞋帽的dl时，clIco的class变成clIcoCur，移出反之。第二的图标是itIco(电脑办公)，当鼠标移到电脑办公的dl时，itIco的class变成itIcoCur，移出反之。具体怎么操作，请指点下
最佳答案
1
首先需要修改一下你给的css的代码
i {
width:9px; height:5px;
display: block;
}
.clIco{background:url(../images/clIco.png) no-repeat;}
.clIcoCur{background:url(../images/clIcoCur.png) no-repeat;}
.itIco{background:url(../images/itIco.png) no-repeat;}
.itIcoCur{ background:url(../images/itIcoCur.png) no-repeat;}
然后给出jQuery代码如下：
jQuery(function(){
var oldclass;
var newclass;
$('dl').mouseover(function(){
$target = $(this).find('i');
oldclass = $target[0].className;
newclass = oldclass+"Cur";
$target.addClass(newclass).removeClass(oldclass);
}).mouseout(function(){
$(this).find('i').addClass(oldclass).removeClass(newclass);
})
});
希望对你有帮助
收获园豆：5
其他回答(2)
0
<dl>
<dt><a><i class="clIco" oldclass="clIco"></i>服装鞋帽</a></dt>
<dd>
<a>女装</a>
<a>男装</a>
<a>童装</a>
<a>运动品牌</a>
</dd>
</dl>
$('dl').mouseover(function(){
var target=$('i',$(this));
target.removeClass(target.attr('oldclass')).addClass('clIcoCur');
}).mouseout(function(){
var target=$('i',$(this));
target.removeClass('clIcoCur').addClass(target.attr('oldclass'));
});
0
1 $('dl').hover(function(){ 2 var icon = $(this).find('i'),oclass = icon[0].className.replace(/^\s+|\s+$/,''); 3 i.className = oclass+'Cur' 4 },function(){ 5 var icon = $(this).find('i'),oclass = icon[0].className; 6 i.className = oclass.replace(/Cur$/,'') 7 });
