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个按钮，Home，Games和Forum。当您将鼠标悬停在“主页”按钮上时，我想将“主页”中的内容转换为链接并在我的网站上显示，与“游戏”按钮相同，当您将鼠标悬停在“论坛”按钮上时，不会显示任何内容。我试过这个：

编辑：再次略微更改了该功能，试图阻止它在每个鼠标上调用服务器，并循环遍历它们并在.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：无法读取未定义的属性'length'。我完全不确定我做错了什么。虽然在此之前我从未使用过JSON。

有人可以帮助我吗？

谢谢， Legobear154

Answer 1

您可以尝试这样做：

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

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

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

Answer 2

你确定这是正确的吗？

 var find=$(this).text;

我会这样做：

 var find=$(this).text();

然后

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

Answer 3

您的对象中没有find属性，因此它会为您提供undefined。然后你试图读取这个未定义属性的第0个索引，它会给你错误。

如果要访问home对象中第0个元素的text属性，可以说data.home[0].text

Answer 4

for (var key in data) {
    if (key == 'Home'){
        $(".navDD").html(data[key]['text']);
    }
}

在使用for循环时，还应确保使用对象。这可能是你未定义的地方。错误来自。

if (typeof data === 'object'){
    for (var key in data) {
        if (key == 'Home'){
            $(".navDD").html(data[key]['text']);
        }
    }
}

Answer 5

您正在使用var find=$(this).text获取元素的内容，您需要使用var find=$(this).text()来调用text方法。

您正在使用data.find[0].text从对象获取值，您需要使用menuData[find][0].text。

每次mouseenter事件发生时都不应该请求JSON文件，您应该只在第一次请求它，然后保持它。

$(document).ready(function(){
  var menuData = null;

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

});

在jquery中循环遍历JSON数组

5 个答案: