使用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屬性

回答

相關問題