如何在Javascript中替換href值

我有以下代碼根據點擊縮略圖（此部分正在工作）更改大圖像。如何在Javascript中替換href值

我想要相應地更改href中的URL（以便顯示的每個大圖都鏈接到另一個URL）。 < - 這最後一部分不起作用。

----------這裏是代碼----------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<meta http-equiv="Content-Script-Type" content="text/javascript"> 

<title>image swapping </title> 



<script type="text/javascript"> 

function init(){ 

    th=document.getElementById('thumbs').getElementsByTagName('img'); 
for(c=0;c<th.length;c++) { 
th[c].onclick=function() { 
    swapImage(this.src); 
    swapFile(this.href); 

    } 
    } 
} 

function swapImage(url){ 

    str=url.lastIndexOf("."); 
    str1=url.substring(str-1); 
    str2=url.substring(str); 

    url=url.replace(str1,str2); 

    document.getElementById('bigpic').src=url; 

} 

function swapFile(url){ 

    str=url.lastIndexOf("."); 
    str1=url.substring(str-1); 
    str2=url.substring(str); 

    url=url.replace(str1,str2); 

    document.getElementById('file').href=url; 

} 

    window.addEventListener? 
    window.addEventListener('load',init,false): 
    window.attachEvent('onload',init); 

</script> 

</head> 
<body> 

<div> 
<a href="01.html" id="file"><img id="bigpic" src="images/01.jpg" alt=""></a> 
</div> 

<div id="thumbs"> 
<img src="images/01t.jpg" alt="01t.jpg"> 
<img src="images/02t.jpg" alt="02t.jpg"> 
<img src="images/03t.jpg" alt="03t.gif"> 
<img src="images/04t.jpg" alt="04t.png"> 
<img src="images/05t.jpg" alt="05t.png"> 
<img src="images/06t.jpg" alt="06t.png"> 
</div> 

</body> 
</html>

來源

2014-01-19 sueblue

你可以做一個JSFiddle嗎？ –

這個問題可能被標記爲重複，但無論如何這都是答案。

要改變錨的href值：

document.getElementById('file').setAttribute('href',url);

來源

2014-01-19 22:08:54 Schien

爲什麼使用'setAttribute（）'而不是：'document.getElementById（'file'）。href = url;'？ – jfriend00

使用setAttribute可更可靠地更改DOM元素的某些屬性。幾年前我研究了根本原因，並且不記得其根本原因。現在，我通過setAttribute設置「id」，「src」和「href」幾乎是肌肉記憶。試試IE。也許它只能這樣工作。 – Schien

我沒有理由爲'.id'或'.href'或'.src'使用'setAttribute（）'。 – jfriend00

你需要稍微改變邏輯...縮略圖沒有聯繫，對不對？

<script> 
function init(){ 

    th=document.getElementById('thumbs').getElementsByTagName('img'); 
for(c=0;c<th.length;c++) { 
th[c].onclick=function() { 
    swapImage(this.src); 
    swapFile(this.getAttribute("alt")); 

    } 
    } 
} 

function swapImage(url){ 

    str=url.lastIndexOf("."); 
    str1=url.substring(str-1); 
    str2=url.substring(str); 

    url=url.replace(str1,str2); 

    document.getElementById('bigpic').src=url; 

} 

function swapFile(hurl){ 

    str=hurl.lastIndexOf("."); 
    str1=hurl.substring(str-1); 
    str2=hurl.substring(str); 

    hurl=hurl.replace(str1,str2); 
hurl=hurl.replace('.jpg','.html'); // for html extension at the end of the link 

    document.getElementById('file').href=hurl; 

} 

    window.addEventListener? 
    window.addEventListener('load',init,false): 
    window.attachEvent('onload',init); 

</script>

HTML：

<div> 
<a href="01.html" id="file"><img id="bigpic" src="images/01.jpg" alt=""></a> 
</div> 

<div id="thumbs"> 
<img src="images/01t.jpg" alt="01t.jpg"> 
<img src="images/02t.jpg" alt="02t.jpg"> 
</div>

來源

2014-01-19 22:42:18 sinisake

太好了。而且，如果你想在鏈接中加入.html的擴展名，一個小的補充：hurl = hurl.replace（'。jpg'，'。html'）;在交換文件功能... – sinisake

謝謝。我只是在寫這個問題！你在我發佈之前回答了它。有用！完善！ – sueblue

我跑在Firebug的代碼，並發現錯誤：

th=document.getElementById('thumbs').getElementsByTagName('img'); 
for(c=0;c<th.length;c++) { 
th[c].onclick=function() { 
    swapImage(this.src); 
    swapFile(this.href); 

    } 
    } 
}

「這」指的是TH [C]，現在看你的圖片標籤：

<img src="images/01t.jpg" alt="01t.jpg"> 
<img src="images/02t.jpg" alt="02t.jpg"> 
<img src="images/03t.jpg" alt="03t.gif">

他們沒有href屬性，所以您的swapFile函數失敗並終止腳本執行。您可以將自定義屬性添加到這些圖像：

<img href="link1" src="images/01t.jpg" alt="01t.jpg"> 
<img href="link2" src="images/02t.jpg" alt="02t.jpg"> 
<img href="link3" src="images/03t.jpg" alt="03t.gif">

但圖像不是錨點，所以th [c] .href不會給你值。

這裏是新的初始化函數：

function init(){ 

    th=document.getElementById('thumbs').getElementsByTagName('img'); 

for(c=0;c<th.length;c++) { 
th[c].onclick=function() { 
    swapImage(this.src); 
    swapFile(this.attributes.href.value); // <-- fixed this line 

    } 
    } 
}

我有本地測試代碼並運行。

來源

2014-01-19 22:52:08 Schien

如何在Javascript中替換href值

回答

相關問題