首页 新闻 搜索 专区 学院

请教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,移出反之。具体怎么操作,请指点下

wanglan的主页 wanglan | 初学一级 | 园豆:156
提问于:2013-02-18 14:42
< >
分享
最佳答案
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
小嘟 | 菜鸟二级 |园豆:207 | 2013-02-21 18:30
其他回答(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'));
});

Qlin | 园豆:2403 (老鸟四级) | 2013-02-18 15:16
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 });
zjhsd2007 | 园豆:192 (初学一级) | 2013-02-18 16:40
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册