0

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

这是我的代码：

查询：

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

HTML：

<ul id="rowOne" class="center">
    <li><a href="#">$100</a></li>
    <li><a href="#">$100</a></li>
    <li><a href="#">$100</a></li>
    <li><a href="#">$100</a></li>
    <li><a href="#">$100</a></li>
</ul>

新分区：

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

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

有人可以帮忙吗？

4

3 回答 3

5

您需要在此更改一些内容：

$.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???
    });
});

正确的更新代码是：

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

还有一个严重的问题。您构建数组的方式在JavaScript中是不正确的。您必须以这种方式替换它：

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?"
                ]
            ];

在我看来，使用 JSON 格式而不是数组来存储它是明智的。JSON 格式是多维的。由于John S的答案具有 JSON 格式，因此您可以从中获取！

于 2013-06-10T17:13:46.513 回答
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]);
    });
});

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

于 2013-06-10T17:21:04.300 回答
1

As you mentioned in your question - you need to iterate over 2D array, so you need to do 2 for each loop simultaneously to get the value. BTW in your given code - array population is not syntactically correct also.

于 2013-06-10T17:15:44.620 回答