使用jQuery更改悬停时的href属性

好吧，我有一个通过PHP加载到另一个html页面的html页面（没错，所以它是一个PHP页面，不管）。加载的页面是超链接列表。我需要更改href属性以使超链接相对于它们所指向的存储图像的位置。当我加载包含超链接的页面时，链接是相对于Web主机服务器的，而不是实际托管页面的服务器。使用jQuery更改悬停时的href属性

财产以后这样的：

<div #screenshots) 
<p><a href="image1.htm">Image1</a></p> 
<p><a href="image2.htm">Image2</a></p> 
<p><a href="image3.htm">Image3</a></p> 
<p><a href="image4.htm">Image4</a></p> 
<p><a href="image5.htm">Image5</a></p> 
</div>

当我将鼠标放在链接时，状态栏显示的参考为“http://webHostServer.com/image1.htm”。如果我点击它，我会得到一个404错误。我需要在href当我在它的鼠标来改变这样的事情：“http://www.actualImageHostServerIPaddress/image1.htm”

我看着this如需协助，并与下面的jQuery代码就出来了，但没有它的一些原因，工作原理：

$(document).ready(function(){ 
$("button").click(function() { 
$("#screenshots a").addClass('ss'); 
}); 
$(".ss").each(function() 
{ 
    $(this).data("oldHref", $(this).attr("href")); 
    orig = $(this).attr("href"); 
    over = "http://208.167.244.33/208.167.244.33/"; 
$(this).hover(function() { 
    $(this).attr("href", $(this).attr("href").replace(orig, over+orig)); 
    }, function() { 
    $(this).attr("href", $(this).data("oldHref")); 
    }); 
});

当我点击按钮时，它不会将类添加到锚标记，所以当我将它悬停在它们上面时，没有任何变化。这里的任何帮助都会很棒。

来源

2010-04-06 AverageJoe

图像是否存储在每台服务器上相同的相对路径？ – 2010-04-06 04:18:21

我会解决真正的问题。 – 2010-04-06 04:18:49

难道只是我，还是你“通过绕月亮前往莫斯科”？我的意思是，为什么不加载链接时更改链接并完成它？或者更好的是，在服务器上更改它们？ – 2010-04-06 04:19:57

我看到一些问题。第一个是经营秩序。您在（document）.ready函数中为按钮添加了单击处理函数，并且运行代码以将悬停函数添加到ss类项目中。问题是添加悬停事件处理程序的代码的后半部分在页面准备就绪后即将运行，但由于尚未单击此按钮，因此没有任何ss类。正如我所看到的，你有几个选择。如果你需要在那里有按钮，那么你可以使用.live（）事件来确保一旦你添加了ss类到链接，他们将得到事件处理程序。

$(document).ready(function(){ 
    $("button").click(function() { 
     $("#screenshots a").addClass('ss'); 
    }); 

    $('.ss').live('mouseover mouseout',function(event){ 

     var over = 'http://208.167.244.33/208.167.244.33/'; 

     if(event.type == 'mouseover'){  
      $(this).data('oldHref', $(this).attr('href'));  
      $(this).attr('href', over + $(this).data('oldHref')); 
     }else{ 
      $(this).attr('href', $(this).data('oldHref')); 
     } 
    }); 
});

如果您不需要的按钮，就可以清除了一点东西

$(document).ready(function(){   
    $('#screenshots a').hover(function(){   
     var over = 'http://208.167.244.33/208.167.244.33/';   
     $(this).data('oldHref', $(this).attr('href'));  
     $(this).attr('href', over + $(this).data('oldHref')); 
    },function(){ 
     $(this).attr('href', $(this).data('oldHref')); 
    }); 
});

如果您不需要保留原来的HREF，你真的可以清理

$(document).ready(function(){ 
    var over = 'http://208.167.244.33/208.167.244.33/'; 
    $('#screenshots a').each(function(){  
     $(this).attr('href', over + $(this).attr('href')); 
    }); 
});

来源

2010-04-06 14:54:06 AdmSteck

使用jQuery更改悬停时的href属性

回答

相关问题