Question

我有以下代码，根据点击的缩略图更改大图像（此部分正常工作）。

我想相应地更改href中的url（以便显示的每个大图像都有指向另一个URL的链接）。＆lt; - 最后一部分不起作用。

----------这里是代码----------------------

<!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>

Answer 1

这个问题可能会被标记为重复，但无论如何这里都是答案。

要更改锚点的href值：

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

Answer 2

你需要稍微改变逻辑......缩略图没有链接，对吗？

    <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>

Answer 3

我在Firebug中运行了代码，发现错误：

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

   }
  }
 }

“this”指的是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不会给你价值。

这是新的init函数：

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

   }
  }
}

我已经在本地测试了代码并运行了。

如何在Javascript中替换href值

3 个答案: