Jquery 路径变量有关问题

2012-03-23

Jquery 路径变量问题HTML code!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://

Jquery 路径变量问题

HTML code

<!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代码中的图片路径变成一个变量，原理就是分别改变路径的后缀，图片全部都是同名不同后缀，望大虾们帮忙，给分多多！

[解决办法]
$('a.face').hover(function(){
this.src=this.src.replace("jpg","gif");
},function(){
this.src=this.src.replace("gif","jpg");
});
[解决办法]

HTML code

<!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>
[解决办法]
这里用正则替换一下后缀就可以实现了
$('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");
   });
});

热点排行

JavaScript

Jquery 路径变量有关问题