javascript - 在 jquery 中循环遍历 JSON 数组

Question

我有一个外部 JSON 文件，里面有这个:

{
"Home": [
    { "link":"index.php" , "text":"Home" }, 
    { "link":"index.php?page=aboutus" , "text":"About Us" }
]
"Games": [
    { "link":"games.php" , "text":"All Games" }, 
    { "link":"games.php?name=game" , "text":"Game" }
]
}

这是我的 JSON 文件的基本设置。我计划在我的站点扩展时添加更多。我将其用作菜单栏设置的一部分。它有 3 个按钮，主页、游戏和论坛。当您将鼠标悬停在主页按钮上时，我想将“主页”中的内容变成链接并显示在我的网站上，与游戏按钮相同，当您将鼠标悬停在论坛按钮上时，不会显示任何内容。我试过这个:

编辑:再次稍微更改了函数，试图阻止它在每次鼠标悬停时调用服务器，并循环遍历它们并将它们显示在 .navDD div 标记中。

$(document).ready(function(){
    var menu
    $.getJSON('menu.json', function(data) {
        menu = data;
    });
    $(".navlink").mouseenter(function(){
        var find=$(this).text();
        $.each(data,function(index){
            $(".navDD").html(menu[find][index]['text']);
        });
    });
});

我确定我还是把事情搞砸了。现在我得到Uncaught TypeError:无法读取未定义的属性“长度”。我完全不确定我做错了什么。尽管在此之前我从未使用过 JSON。

有人可以帮帮我吗？

谢谢， 乐高熊154

Answer 1

你可以尝试这样做:

$(".navlink").mouseenter(function(){
    var find=$(this).text;
    $.getJSON('menu.json', function(data) {
        $(".navDD").html(data[find][0].text);
    });
});

通过名称访问属性。这是假设您使用的文本值与对象的 JSON 属性相匹配。

我还建议不要在每次鼠标输入时执行 $.getJSON()。那是很多服务器流量。用户可能被“鼠标输入”数百次。