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

讓我知道如果你需要有什麼額外的幫助......