根据数组中的数组更改 div 的内容

Question

index.html的Pastebin：http://pastebin.com/kdKFqTxe 只需复制并粘贴并运行它（这可行，但有一些损坏的 img 链接且没有 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 中每个元素的 for 循环，然后将 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"]],
                 },
     }