根據數組中的數組更改div的內容

Question

index.html的Pastebin：http://pastebin.com/kdKFqTxe 只需複製並粘貼並運行它（此工作但有一些損壞的圖像鏈接& no css）。 關於pastebin，只需點擊一個節點，然後點擊視頻下方第一個破碎的圖像。應該發生什麼是一個對話框應該出現鏈接到文章（從tubeArray）。所有相關的代碼都粘貼在下面。

我試圖動態更改div的內容，當我點擊圖像。圖像具有相應的id（內部數組中的第一個索引），第一個內部數組中有另一個數組（索引3）。我想用點擊圖像時使用JQuery的鏈接來填充div（id =「articleLinks」）。

的JavaScript & JQuery的：

的管陣列。 *注意：tubeArray中每個元素的第一個索引是ID &新聞文章沒有鏈接到任何特定的東西。只關心tubeArray [0] & tubeArray [4]

var tubeArray = [ 
      ['UQ', -27.495134, 153.013502, "http://www.youtube.com/embed/uZ2SWWDt8Wg", 
       [ 
       ["example.com", "Brisbane students protest university fee hikes"], 
       ["example.com", "Angry protests over UQ student union election"], 
       ] 
      ], 
      ['New York', 40.715520, -74.002036, "http://www.youtube.com/embed/JG0wmXyi-Mw", 
       [ 
       ["example.com" , "NY taxpayers’ risky Wall Street bet: Why the comptroller race matters"] 
       ] 
      ], 
      ['To The Skies', 47.09399, 15.40548, "http://www.youtube.com/embed/tfEjTgUmeWw", 
       [ 
       ["example.com","Battle for Kobane intensifies as Islamic State uses car bombs, Syrian fighters execute captives"], 
       ["example.com","Jihadists take heavy losses in battle for Syria's Kobane"] 
       ] 
      ], 
      ['Fallujah', 33.101509, 44.047308, "http://www.youtube.com/embed/V2EOMzZsTrE", 
       [ 
       ["example.com","Video captures family cat saving California boy from dog attack"], 
       ["example.com","Fines of £20,000 for dogs that chase the postman"] 
       ] 
      ] 
     ]; 

一種用於環路經過在tubeArray每個元素然後分配ID到第一索引。另外一個圖像，調用功能myFunctionId它採取參數this.id。

for (i = 0; i < tubeArray.length; i++) { 
    var id = tubeArray[i][0]; 

    //other code 

    '<img src="img.png" onclick="myFunctionId(this.id);" id="' + id + '">' + 

    //other code 
} 

function myFunctionId (id) { 
     journal = id; 
     alert(journal) //just a test 

     //I want to search through tubeArray with the id and find the matching inner array. 

     //I then want to loop through the innerArray and append to my html a link using JQuery. 
     $('#articleLinks').append("<a href='"+innerArray[0]+"'>"+innerArray[1]+'</a>'); // use CSS to break lines 
     } 
} 

HTML：

<div id="articleLinks"> 
    <a href="http:/www.google.com">Example Link</a><br> 
</div> 

任何幫助將不勝感激。我試圖儘可能簡化&，以便它可讀。

Answer 1

試試這個...

function myFunctionId (id) { 
    console.log(tubeArray); 
    tubeArray.forEach(function(entry) { 
     if (entry[0]==id) { 
     entry[4].forEach(function(innerArray){ 
      $('#articleLinks').append("<a href='"+innerArray[0]+"'>"+innerArray[1]+'</a>'); // use CSS to break lines 
     }); 
     return; 
     } 
    });     
} 

這使得它看起來像這樣對我......你得來處理編碼問題。與撇號。有很多的方法來處理它...

所以....如果是我......它不是。但如果是...我會使用關聯數組而不是數字索引的數組，因爲它更容易閱讀代碼並理解您正在使用的內容以及在何處，如何以及事物和內容。

tubeArray = { 
    'UQ' :  { 'location': [-27.495134, 153.013502], 
        'youtube': "example.com/embed/uZ2SWWDt8Wg", 
        'articles': [["example.com/queensland/brisbane-students-protest-university-fee-hikes-20140521-zrk8o.html", "Brisbane students protest university fee hikes"], 
           ["example.com/content/2012/s3578878.htm", "Angry protests over UQ student union election"], ] 
       }, 
    'New York': { 'location': [0.715520, -74.002036], 
        'youtube': "example.com/embed/JG0wmXyi-Mw", 
        'articles': [["example.com/2014/10/19/ny-taxpayers-risky-wall-street-bet-why-the-comptroller-race-matters/" , "NY taxpayers’ risky Wall Street bet: Why the comptroller race matters"]], 
       }, 
    }