index.html的Pastebin:http://pastebin.com/g8WpX6Wn(这有效,但有一些破坏的img链接和没有css)。
Zip文件,如果你想看到整个项目:
我点击图片时尝试动态更改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"]
]
]
];
for循环遍历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.
for (j = 0; i < innerArray.length; j++){
//supposed to get "www.linkX.com"
var $link = ;
//supposed to get "titleX"
var $title = ;
//change the content of <div id="articleLinks">
$('#articleLinks').append('<a href=$link>$title</a><br>');
}
}
HTML:
<div id="articleLinks">
<a href="http:/www.google.com">Example Link</a><br>
</div>
非常感谢任何帮助。我试图简化&amp;我尽可能地删掉它,以便它可读。
答案 0 :(得分:0)
这可能会有所帮助:让自己成为像
这样的地图var tubeArray = [
[ // tubeArray[0]
'id', // tubeArray[0][0]
int, // tubeArray[0][1]
int, // tubeArray[0][2]
[ // tubeArray[0][3]
[ // tubeArray[0][3][0]
"www.link1.com", // tubeArray[0][3][0][0]
"title1" // tubeArray[0][3][0][1]
],
[ // tubeArray[0][3][1]
"www.link2.com", // tubeArray[0][3][1][0]
"title2" // tubeArray[0][3][1][1]
]
]
],
等。 不知道这是否有帮助,但是四维阵列是大脑破碎......
<强> [编辑] 强>
...因此采用更像OO的方法:
var tubeArray = [
'id' : { // tubeArray[id] or tubeArray.id
'a': int, // tubeArray.id.a
'b': int, // tubeArray.id.b
'entries': [ // tubeArray.id.entries
{ // tubeArray.id.entries[0]
'url': "www.link1.com", // tubeArray.id.entries[0].url
'title': "title1"
},
{ // tubeArray.id.entries[1]
'url': "www.link2.com", // tubeArray.id.entries[1].url
'title': "title2" ...
}
]
] ,
答案 1 :(得分:0)
首先,您需要遍历tubeArray
然后深入4并在该级别上遍历阵列数组。当然,你遍历那些内部数组并获得元素0
和1
。
$.each(tubeArray, function(z, o){
$.each(o[4], function(i, a){
$.each(a, function(n, v){
$('#articleLinks').append("<a href='"+v[0]+"'>"+v[1]+'</a>'); // use CSS to break lines
});
});
}