上回做项目的时候用到了一个效果:点击某张图片时切换图片,这回也用到了,但是上回的代码却找不到了,只能重新写。为了避免“每次都重写"情况的发生,特意在这里做个记录。
具体业务是这样子的:点击UL下的LI时,弹出DIV,且LI下面的img标签切换src属性,如:默认情况下是"images/pic.png",点击之后变成"images/pic_1.png",再次点击或者DIV关闭时src属性变成“images/pic.png”,也就是变成初始状态。
LI的基本结构:
<ul>
<li οnclick="load(this);">
<a href="javascript:void(0);">
<img src="images/pic.png"/>
</a>
</li>
......
</ul>
因为src中的图片时可以随便修改的,不适合将图片作为背景写在class中,所以才使用img标签以便灵活切换,正因如此通过修改src属性就能达到效果。(load方法包含两部分:DIV展示和图片切换,这里只记录图片切换)
具体代码如下:
/** *修改图标样式 *@param flag 标记 1-obj为li对象 2-obj对象为空,需要根据特定标记查找 */ function setIcon(obj,flag){ var $img=null,src=null,array=null; switch(flag){ case 1://点击左侧一级图标时 $img = $(obj).children().children("img");//获取img对象 src = $img.attr("src");//获取当前src值 array = src.split("_");//判断是否有下划线 //src中若没有下划线,那么array.length=1,否则至少得大于1 if(array.length>1){//说明有下划线,也就是处于选中状态,那么需要恢复回去 $(obj).attr("cur","0");//取消当前LI的选中属性 //alert(array[0]+".png"); $img.attr("src",array[0]+".png"); }else{//说明没有下划线,那么处于非选中状态,需要添加选中状态 setIcon("",2);//取消其他li的选中状态 $(obj).attr("cur","1"); array = src.split("."); //alert(array[0]+"_1.png"); $img.attr("src",array[0]+"_1.png"); } break; case 2: $("ul li[cur=1]").each(function(){ $(this).attr("cur","0");//取消当前LI的选中属性 $img=$(this).children().children("img"); src = $img.attr("src");//获取当前src值 array = src.split("_"); //alert(array[0]+".png"); $img.attr("src",array[0]+".png"); }); break; default: break; } }
说明:flag用来标记是否有明确的li,
flag=1,说明需要修改的就是传递过来的li下的image;
flag=2,说明需要根据cur属性去找相应的li并进行修改,其中cur=1表示当前li处于选中状态,cur=0表示非选中状态。