Javascript 基于数组中的数组更改div的内容

index.html的粘贴库： 只需复制并粘贴它，然后运行它（这可以工作，但有一些损坏的img链接&没有css）。 关于粘贴箱，只需单击一个节点，然后单击视频下方的第一个断开的图像。应该出现一个带有文章链接的对话框（来自tubeArray）。所有相关代码粘贴在下面

我试图在单击图像时动态更改div的内容。图像有其各自的id（内部数组中的第一个索引），在第一个内部数组中有另一个数组（索引3）。我想在单击图像时使用JQuery将这些链接填充到我的div（id=“articleLinks”）

JavaScript&JQuery:

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

管阵列*注意：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

HTML:

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

任何帮助都将不胜感激。我已尽可能简化和删减，使其可读。

试试这个

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;
       }
   });                 
}

---

有了pastebin…什么…发生了这么多事情。我在点击什么？我想发生什么？顶部的黑色条令人难以置信地讨厌，顺便说一句。有了所有这些代码，一个人到底要做什么来触发动作（你点击什么），您希望在单击时发生什么事情？它现在到底在做什么？您需要记住，我们对您想做什么或页面如何工作一无所知。请将您的代码缩小到一个最小的示例，并将其与复制和预期的步骤一起放入jsfiddle.net我认为…我们单击了红点。不确定。我ied直接粘贴到您的解决方案中，但它不起作用。至于关联数组（它看起来好多了，我希望一开始就这样做）.@spamsaddle-该函数是我唯一更改的，它对我有效。为什么它对你无效？错误或其他什么？还有，你在哪个浏览器中？拿出

console.log（）

如果你使用的是IE w/o developer tools open。我刚刚测试了它…我重新复制了pastebin上的内容。更新了函数，其他什么都没有。它显示的框与我在帖子中的图像完全相同。哦…嘿，还有articleLinks div或其他什么，因为你在追加，每次单击时，它都会追加，永远不会清除或重置。不，对不起，你太棒了。这是我这边的问题。你做的一切都很完美。你是我的救世主，对不起，我曾经怀疑过你，我的主。

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"]],
                 },
     }