如何使用數組顯示文本？

Question

我正在處理這個簡單的「圖書清單」任務，我幾乎完成了它，除了我想在每本書下添加一個文本，例如：text1，text2，text3等。我有一個數組存儲每個文本。截至目前，我正在循環播放我的數組，但我一直在爲所有圖片獲取「text12」。基本上我想添加一個功能，當用戶點擊一個鏈接例如「Murach的HTML5和CSS3」時，我應該在圖片正下方得到圖片以及text1等等。任何人都可以告訴我我做錯了請。先進的非常感謝你。

CodePen：http://codepen.io/HenryGranados/pen/dMNpBV

這裏是我的javascript代碼：

var $ = function (id) { 
return document.getElementById(id); 
} 
window.onload = function() { 
// set up the list display 
var categories = $("categories"); 
var h2Elements = categories.getElementsByTagName("h2"); 

var h2Node; 
for (var i = 0; i < h2Elements.length; i++) { 
h2Node = h2Elements[i]; 

    // Attach event handler 
    h2Node.onclick = function() { 

     var h2 = this;   // h2 is the current headingNode object 

     if (h2.getAttribute("class") == "plus") { 
      h2.setAttribute("class", "minus"); 
     } 
     else { 
      h2.setAttribute("class", "plus"); 
     } 
     if (h2.nextElementSibling.getAttribute("class") == "closed") { 
      h2.nextElementSibling.setAttribute("class", "open"); 
     } 
     else { 
      h2.nextElementSibling.setAttribute("class", "closed"); 
      var linkElements = h2.nextElementSibling.firstChild.childNodes; 
    } 
    $("image").setAttribute("src", ""); 
     // needed for IE so a placeholder isn't displayed for the image 
     $("image").setAttribute("style", "display:none;"); 
    } 
} 

// set up the image display 
var listNode = $("categories"); 
var imageNode = $("image"); 
var texto = $("texto"); 

var imageLinks = listNode.getElementsByTagName("a"); 
var array = ["text1", "text2", "text3", "text4", "text5", "text6", "text7", "text8", "text9", "text10", "text11", "text12"]; 

// Process image links 
var i, linkNode, image; 
for (i = 0; i < imageLinks.length; i++) { 
    linkNode = imageLinks[i]; 
    for(var j = 0 ; j < array.length; j++){ 
     linkNodeArray = array[j]; 

    // Attach event handler 
    linkNode.onclick = function (evt) { 
     var link = this;   // link is the linkNode 
     var mitexto = this; 

     imageNode.src = link.getAttribute("href"); 
     texto.innerHTML = linkNodeArray; 

     // needed for IE to display the image 
     imageNode.setAttribute("style", "display:block;"); 

     // Cancel the default action of the event 
     if (!evt) { evt = window.event; } 
    if (evt.preventDefault) { 
      evt.preventDefault();   // DOM compliant code 
     } 
     else { 
     evt.returnValue = false; 
     } 
    } 
    // Preload image 
    image = new Image(); 
    image.src = linkNode.getAttribute("href"); 
    } 
} 
} 

Answer 1

您可以通過 「imageLinks」，併爲每個項目循環中imageLinks還循環結束陣列（文字陣列）。所以，事件「onclick」將被覆蓋到最後一個（使用最後一個文本數組元素）。

另外，您應該設置每個圖像的文本鏈接屬性。它會幫助彼此

固定碼分離想：

var $ = function (id) { 
    return document.getElementById(id); 
} 
window.onload = function() { 
    // set up the list display 
    var categories = $("categories"); 
    var h2Elements = categories.getElementsByTagName("h2"); 

    var h2Node; 
    for (var i = 0; i < h2Elements.length; i++) { 
    h2Node = h2Elements[i]; 

     // Attach event handler 
     h2Node.onclick = function() { 

      var h2 = this;   // h2 is the current headingNode object 

      if (h2.getAttribute("class") == "plus") { 
       h2.setAttribute("class", "minus"); 
      } 
      else { 
       h2.setAttribute("class", "plus"); 
      } 
      if (h2.nextElementSibling.getAttribute("class") == "closed") { 
       h2.nextElementSibling.setAttribute("class", "open"); 
      } 
      else { 
       h2.nextElementSibling.setAttribute("class", "closed"); 
       var linkElements = h2.nextElementSibling.firstChild.childNodes; 
     } 
     $("image").setAttribute("src", ""); 
      // needed for IE so a placeholder isn't displayed for the image 
      $("image").setAttribute("style", "display:none;"); 
    } 
} 

    // set up the image display 
    var listNode = $("categories"); 
    var imageNode = $("image"); 
    var texto = $("texto"); 

    var imageLinks = listNode.getElementsByTagName("a"); 
    var array = ["text1", "text2", "text3", "text4", "text5", "text6", "text7", "text8", "text9", "text10", "text11", "text12"]; 

    // Process image links 
var i, linkNode, image; 
for (i = 0,j=0; i < imageLinks.length; i++,j++) { 
    linkNode = imageLinks[i]; 
     if(j>=array.length) j=0; //Back to begin if array text not enough for link elements 
     linkNodeArray = array[j]; 
    linkNode.setAttribute('title',linkNodeArray); 
    // Attach event handler 
    linkNode.onclick = function (evt) { 
     var link = this;   // link is the linkNode 
     var mitexto = this; 

     imageNode.src = link.getAttribute("href"); 
     texto.innerHTML = link.getAttribute('title'); 

     // needed for IE to display the image 
     imageNode.setAttribute("style", "display:block;"); 

     // Cancel the default action of the event 
     if (!evt) { evt = window.event; } 
    if (evt.preventDefault) { 
      evt.preventDefault();   // DOM compliant code 
     } 
     else { 
     evt.returnValue = false; 
     } 
    } 
    // Preload image 
    image = new Image(); 
    image.src = linkNode.getAttribute("href"); 

} 
} 

Answer 2

這就是所謂的Infamous Loop Problem（請閱讀本文件，以獲得更好的理解這個問題的導航到部分The Infamous Loop Problem。 ），循環內部的值通過引用傳遞，所以只有最後一個循環的值將被分配給所有其他循環，因爲所有循環仍然指向相同的引用變量，最後一個設置值是每個循環指向的那個值。如果你把所有的東西放到onclick中，這個問題將被解決。請參閱下面的代碼。

for (var i = 0; i < h2Elements.length; i++) { 
.... 
.... 
h2Node.onclick = function() { 
    return function(){ 
    //put all your existing stuff here. 
    };  
}(); 
.... 

}