Question

我试图创建一个“危险”（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]);
        });
    });

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：

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

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

有人可以帮忙吗？

Answer 1

你需要改变一些事情：

$.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格式，你可以从中获取它！

Answer 2

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

Answer 3

我建议使用一组对象，而不是使用二维数组。每个对象都代表一个类别。每个类别对象的属性都是一系列线索。

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

顺便说一句：如果你把这些线索说成是问题，那真的不是危险的。

Jquery用于迭代2D数组，然后将值放在HTML DIV中

3 个答案: