在javascript数组中添加超链接到图像

Question

我有一个问题。发现了一些话题，但没有人真正回答我的问题，因为他们以不同的方式完成了阵列。

所以我有这个javasript数组与图像和两个按钮的下一个和以前。 我想添加超链接到数组中的图片，所以当我通过按钮循环时，我可以点击它们并输入提到的网站。

所以HTML像这样做：

<div id="leftbox"> 
<p id="leftpopis"> Whats new on the web? </p> 
<img src="obrazky/0.png" id="imgDemo" > 
<button onclick="prvs()" id="btnTwo"> <img src="obrazky/left.png"/> 
</button> 
<button onclick="nxt()" id="btnOne"> <img src="obrazky/right.png"/> 
</button> 

而像这样的javasript：

<script> 
var img = new 
Array("obrazky/0.png","obrazky/1.png","obrazky/2.png","obrazky/3.png"); 

var imgElement = document.getElementById("imgDemo"); 
var i = 0; 
var imgLen = img.length; 

    function nxt() 
    { 
     if(i < imgLen-1) 
      { 
       i++; 
      } 
     else{ 
       i=0;     
      } 

      imgElement.src = img[i];      
    } 

    function prvs() 
    { 
     if(i > 0) 
      { 
       i--; 
      } 
     else 
     { 
      i = imgLen-1; 
     } 
      imgElement.src = img[i];      
    } 

这是funcional的方式，它swithces的照片，但是当我想要添加像这样的数组：

var img = new Array Array("<a href="comments.html"> obrazky/0.png"</a>); 

它不起作用。有人知道如何更新数组，使其按预期工作？

非常感谢:)）

Answer 1

乍一看，我可能会丢失其他东西，但它看起来像你意外退出您的字符串，也不能完全包括锚标记。

var img = new Array("<a href="comments.html"> obrazky/0.png"</a>); 

这里有几个选项。您可以使用单引号（并注明您的一个标签）这样

var img = new Array("<a href='comments.html'> obrazky/0.png</a>"); 

或者我认为你可以在这里使用一个字符串使用反引号（下〜波浪）

var img = new Array(`<a href="comments.html"> obrazky/0.png</a>`); 

Answer 2

创建一个对象的图像和URL也许？

[{img: "obrazky/0.png", url: "comments.html"}, {...}, {...}] 

imgElement.src = img[i.img]; 
linkElement.href = img[i.url]; 

Answer 3

我明白你想要做什么。我建议事先加载你的内容，但在这个例子中，我建议使用与数组相反的对象。甚至还有一些对象。所以：

var img = [ 
    { 
     "img": "obrazky/0.png", 
     "href": "comments.html", 
    }, 
    { 
     "img": "obrazky/0.png", 
     "href": "comments.html", 
    } 
]; 

你可以这样img[i].img和img[i].href访问属性。

因此，在当前设置你想要做这样的事情：

<a href="" id="imageAnchor"><img id="imgDemo" src=""></a> 

而且随着

document.getElementById("imageAnchor").href = img[i].href; 
document.getElementById("imgDemo").src = img[i].img; 

设置你的数据，但正如我前面所说，一个更好的方法是预先加载图片并通过它们循环。

<ul id="images"> 
    <li class='active'><a href="comments.html"><img src="obrazky/2.png"></a></li> 
    <li><a href="comments.html"><img src="obrazky/1.png"></a></li> 
    <li><a href="comments.html"><img src="obrazky/0.png"></a></li> 
</ul> 

<style> 
    ul#images { 
     margin:0px; 
     padding:0px; 
     list-style-type:none; 
    } 
    ul#images li { 
     display:none; 
    } 
    ul#images li:first-child, 
    ul#images li.active { 
     display:block; 
    } 
</style> 

<script> 
    imageContainer = document.getElementById("images"); 

    document.getElementById("btnOne").addEventListener(function(event) { 
     event.preventDefault(); 
     //do magic here. 
     //been a while since I've touched vanilla so give me a minute :d 
     //basically what you need to do here is cycle through the nodes, 
     //find the active one, if there is a nextSibling of .active: 
     // set nextSibling.class ='active' and the current element remove active 
     for(var i=0; i < imageContainer.childNodes.length; i++) { 
      if (imageContainer.childNodes[i].className == 'active') { 
        if (imageContainer.childNodes[i].nextSibling !== 'undefined') { 
         imageContainer.childNodes[i].nextSibling.className = 'active'; 
         imageContainer.childNodes[i].className = ''; 
        } 
       } 
     } 
    }; 

    //Notice this function is similar and I've replaced nextSibling with Previous for the opposite direction 

    document.getElementById("btnTwo").addEventListener(function(event) { 
     event.preventDefault(); 

     for(var i=0; i < imageContainer.childNodes.length; i++) { 
      if (imageContainer.childNodes[i].className == 'active') { 
        if (imageContainer.childNodes[i].previousSibling !== 'undefined') { 
         imageContainer.childNodes[i].previousSibling.className = 'active'; 
         imageContainer.childNodes[i].className = ''; 
        } 
       } 
     } 

</script> 

没有测试过，但是这是诸如此类的事情，你想要做

Answer 4

我认为你是混合src和本身的链接。

如果你想创建在客户端都可以保持一个数组与两个场的每个图像的信息：

var img = [ {link='xxx', src="obrazky/0.png"}, {link='yyy' src="obrazky/1.png"},... ] 

然后在你的模板，你有一个链接来包装形象：

<a id='imgDemoLink'> <img id='imgDemo'></a> 

，然后在你的脚本，你应该更新了DOM元素：

imgElement.src = img[i.src]; 

然后得到的DOM相关链接：

var aElement = document.getElementById("imgDemoLink"); 
aElement.href = img[i.link] 

让我知道如果你需要有什么额外的帮助......