Jquery，用于迭代二维数组，然后将值放入HTML DIV中

我试图创建一个“危险”（en.wikipedia.org/wiki/Jeopardy！‎ )风格游戏。我的设置方式是5 x 5矩阵或多维数组。我试图编写一段代码，遍历每个数组，然后将值放入另一个HTML DIV中

这是我的密码：

Jquery：

var clues = new Array ();
    [0] [0] = "On the world political map, where were some of the major states and empires located about 1500 A.D. (C.E.)?";
    [0] [1] = "What were the artistic, literary, and intellectual ideas of the Renaissance?";
    [0] [2] = "Where were the five world religions located around 1500 A.D. (C.E.)?";
    [0] [3] = "What were the regional trading patterns about 1500 A.D. (C.E.)?";
    [0] [4] = "Why were the regional trading patterns important?";

   $.each(clues, function(){
       $("#rowOne").append('<li>' +value+ '</li>'); 
       ('li').on('click','a', function(){
            var foo = $(this).text();
            $('#clueContainer').text(clues [foo]);
        });
    }); 

var线索=新数组（）；
[0][0]=“在世界政治地图上，大约公元1500年（公元前1500年）一些主要国家和帝国位于何处？”；
[0][1]=“文艺复兴时期的艺术、文学和知识观念是什么？”；
[0][2]=“公元1500年左右，世界五大宗教在哪里？”；
[0][3]=“公元1500年左右的区域贸易模式是什么？”；
[0][4]=“为什么区域贸易模式很重要？”；
$.each（线索，函数（）{
$（“#rowOne”）.append（“
”+value+”
”）；
（'li'）。在（'click'，'a'，函数（）上{
var foo=$（this.text（）；
$（'#clueContainer'）。文本（线索[foo]）；
});
}); 

HTML:

新部门：

   <div id="clueContainer" class="center"></div>  

但是，当我运行代码时，新的HTML DIV中没有显示任何内容

---

有人能帮忙吗？

在这方面你需要做一些改变：

$.each(clues, function(){
//                     ^-------------------------------- No params given
   $("#rowOne").append('<li>' +value+ '</li>'); 
//                             ^------------------------ Undefined
   ('li').on('click','a', function(){
// ^---------------------------------------------------- Syntax Error, missing $
//        ^--------------------------------------------- Why each loop run?
        var foo = $(this).text();
        $('#clueContainer').text(clues [foo]);
//                                     ^---------------- Space???
    });
});

---

---

在我看来，明智的做法是使用JSON格式来存储，而不是使用数组。JSON格式是多维的。因为您的答案是JSON格式的，您可以从中得到它

正如您在问题中提到的-您需要迭代2D数组，因此需要同时对每个循环执行2次以获得值。顺便说一句，在给定的代码中，数组填充在语法上也不正确。

与其使用二维数组，不如使用对象数组。每个对象都代表一个类别。每个类别对象的属性都是一组线索

var categories = [
    {
        name: 'Category 1',
        clues: [
            'clue 1',
            'clue 2',
            'clue 3'
        ]
    },
    {
        name: 'Category 2',
        clues: [
            'clue 1',
            'clue 2',
            'clue 3'
        ]
    }
];

// The length of this array matches the lengths of the clue arrays.
var values = ['$100', '$200', '$300'];

您可以像这样迭代它们：

$.each(categories, function(i, category) {
    alert('Category: ' + category.name);
    $.each(category.clues, function(i, clue) {
        alert('Clue: ' + clue + ', value=' + values[i]);
    });
});

---

顺便说一句：如果你将线索表述为问题，这并不是真正的危险。

看看你的javascript控制台。你会发现你有很多语法错误。你从来没有建立你的数组。为什么你需要一个2D数组呢？这是因为我有五行五列。我只发布了一行，我假设其余的行在代码上是相似的。@justLearning，您可能会认为您发布了一行。正如James Montagne所说，您有许多语法错误，这就是为什么，正如j08691所指出的，您从未构建数组。@justLearning，您的最新编辑更疯狂。你会考虑一个基本的JS教程吗？你忽略了最大的问题。阵列“建筑”。@JamesMontagne谢谢你让我知道。我已经更新了答案。：）更新的代码中有一些问题。每个的回调都传递了第一个参数，即索引，而不是元素。第二个参数是元素。此外，您不能像那样在“2d”数组上对每个

进行
<代码>值
将是一个数组。你的阵列构建不会像那样工作。@JamesMontagne，看看这是否有效？嗯，我用
线索[0]
替换了
线索
：这很尴尬，但我可以知道投票失败的原因吗？我应该以任何方式改进答案吗？仅供参考，这是一个笑话，我实际上投了更高的票，而不是反对。。。“不知道为什么有人会否决这一点。”詹姆斯·蒙塔涅——我明白了这个笑话。实际上，我考虑将其作为一个问题，但这并不容易。这是可行的，但我希望将值放入“#clueContainer”DIV中，而不是放在“alert”框中。我只是演示如何迭代数据结构。警报仅用于显示如何访问数据。下面是一个演示如何使用数据生成元素的示例。我相信这会起作用。我只需要添加代码来匹配我的HTML代码。我做错了什么家伙。。。我在这里提到的有什么不对吗。请让我知道我这次投票的错误。你们做的和我之前说的一样…我们都被否决了。我认为你没有说任何不正确的话。
var clues = [
                [
                    "On the world political map, where were some of the major states and empires located about 1500 A.D. (C.E.)?",
                    "What were the artistic, literary, and intellectual ideas of the Renaissance?",
                    "Where were the five world religions located around 1500 A.D. (C.E.)?",
                    "What were the regional trading patterns about 1500 A.D. (C.E.)?",
                    "Why were the regional trading patterns important?"
                ]
            ];

var categories = [
    {
        name: 'Category 1',
        clues: [
            'clue 1',
            'clue 2',
            'clue 3'
        ]
    },
    {
        name: 'Category 2',
        clues: [
            'clue 1',
            'clue 2',
            'clue 3'
        ]
    }
];

// The length of this array matches the lengths of the clue arrays.
var values = ['$100', '$200', '$300'];

$.each(categories, function(i, category) {
    alert('Category: ' + category.name);
    $.each(category.clues, function(i, clue) {
        alert('Clue: ' + clue + ', value=' + values[i]);
    });
});