Jquery 路径变量问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
body{ margin:0 ; padding:0; }
.face{}
img{ border:none;}
ul{ list-style:none}
ul li a{ display:block; padding:10px; width:24px; height:24px;}
</style>
</head><body>                <ul class="face">              
                    <li><a href="#" class="face"><img class="face"  src="88.jpg" alt="img" />   </a></li>                          
                </ul>
                <script> 
  $('a.face').bind('mouseenter', function() { 
    $('img.face').attr("src","88.gif"); 

  }); 
    $('a.face').bind('mouseleave', function() { 
    $('img.face').attr("src","88.jpg"); 

  }); 
</script> 
</body>
</html>
=================================
小弟我现在想把JQ代码中的图片路径变成一个变量，原理就是分别改变路径的后缀，图片全部都是同名不同后缀，望大虾们帮忙，给分多多！

解决方案 »

  1.   

    $('a.face').hover(function(){
    this.src=this.src.replace("jpg","gif");
    },function(){
    this.src=this.src.replace("gif","jpg");
    });
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <style type="text/css">
    body{ margin:0 ; padding:0; }
    .face{}
    img{ border:none;}
    ul{ list-style:none}
    ul li a{ display:block; padding:10px; width:24px; height:24px;}
    </style>
    </head><body>                <ul class="face">              
                        <li><a href="#" class="face"><img class="face"  src="88.jpg" alt="img" />   </a></li>                          
                    </ul>
    <script>
    $(function(){
    $('a.face').hover(function(){
    var obj = $(this).find("img.face");
    obj.attr("src", obj.attr("src").replace(/jpg$/i,"gif"));
    },function(){
    var obj = $(this).find("img.face");
    obj.attr("src", obj.attr("src").replace(/gif$/i,"jpg"));
    });
    });
    </script> 
    </body>
    </html>
      

  3.   

    这里用正则替换一下后缀就可以实现了
    $('a.face').hover(function(){
        $(this).find("img.face").attr("src", function(index, attr){
            return attr.replace(/jpg$/i,"gif");
        });
    },function(){
       $(this).find("img.face").attr("src", function(index, attr){
            return attr.replace(/gif$/i,"jpg");
        });
    });