0

我想连接从 JSON 获取内容的导航栏，并使用 jquery 打开和关闭来自 JSON 的其他内容。我真的不知道如何将 jquery 连接到从 JSON 获取信息的导航栏。

我试图用谷歌搜索这个问题，但在任何地方都没有找到解决方案。

脚本

  <script>
        $.getJSON('events.json', function (data) {
            var $menu = $('#navbarNav ul.navbar-nav');
            $.each(data, function () {
                var url = this.url || '#';
                $menu.append(
                    '<li class="nav-item">' +
                    '<a class="nav-link" href="' + url + '">' + (this.name || this.id) + '</a>' +
                    '</li>'
                );
            });
        });
    </script>

    <script>
        $(document).ready(function () {
            $('#show').click(function () {
                $('.menu').toggle("slow");
            });
        });
    </script>

    <script>
        $(document).ready(function () {
            $.getJSON('results.json', function (data) {
                var results_table = '';
                $.each(data, function (key, value) {
                    results_table += '<tr>';
                    results_table += '<td>' + value.Rank + '</td>';
                    results_table += '<td>' + value.Country + '</td>';
                    results_table += '<td>' + value.Athlete + '</td>';
                    results_table += '<td>' + value.Time + '</td>';
                    results_table += '<td>' + value.Points + '</td>';
                    results_table += '</tr>';
                });
                $('#results_table').append(results_table);
            });
        });
    </script>

HTML

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Events</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
        </div>
    </nav>

    <div id="show">test</div>
    <div class="container">
        <table class="table table-borderless menu" id="results_table" style="display: none;">
            <thead>
                <tr>
                    <th scope="col">Rank</th>
                    <th scope="col">Country</th>
                    <th scope="col">Athlete</th>
                    <th scope="col">Time</th>
                    <th scope="col">Points</th>
                </tr>
            </thead>
        </table>
    </div>

JSON

[
        {
            "id" : "1", 
            "name" : "100m"
        },

        {
            "id" : "2", 
            "name" : "Long Jump"
        },

        {
            "id" : "3", 
            "name" : "Shot Put"
        },

        {
            "id" : "4", 
            "name" : "High Jump"
        }
]

JSON_2

[
    {
        "Rank": "1",
        "Country": "JPN",
        "Athlete": "Akihiko Nakamura",
        "Time": "4:18.370",
        "Points": "823"
    },
    {
        "Rank": "2",
        "Country": "AUS",
        "Athlete": "Cedric Dubler",
        "Time": "4:32.120",
        "Points": "731"
    },
    {
        "Rank": "3",
        "Country": "AUT",
        "Athlete": "Dominik Distelberger",
        "Time": "4:33.470",
        "Points": "722"
    },
    {
        "Rank": "4",
        "Country": "EST",
        "Athlete": "Karl Robert Saluri",
        "Time": "4:39.400",
        "Points": "684"
    },
    {
        "Rank": "5",
        "Country": "POL",
        "Athlete": "Pawel Wiesiolek",
        "Time": "4:42.270",
        "Points": "666"
    },
    {
        "Rank": "DNF",
        "Country": "CZE",
        "Athlete": "Jiri Sykora",
        "Time": "Did not finish",
        "Points": "0"
    }
]
4

1 回答 1

0

因此，如果我理解正确，当有人单击您使用 events.json 文件中的数据创建的导航栏链接时，您正在尝试动态加载不同的 JSON 结果。

目前，您有一个 AJAX 调用来加载 document.ready 上发生的结果，因此它只会加载该 results.json 一次。

当您单击导航栏中的某个链接时，要使其动态工作，您需要首先将加载结果的 AJAX 调用移动到一个函数中，然后您需要让该函数接受一个参数，告诉它要加载哪些结果. 您可以通过多种方式做到这一点。如果您有每个事件的静态 JSON 文件，您可以适当地命名它们，并按名称加载它们（即 100m.json、Long_Jump.json 等）。然后你可以让加载 JSON 的函数使用传递的参数。（如果您有一个动态创建 JSON 结果的服务器端脚本，您也可以将事件类型作为参数传递给加载 URL）。

在这个例子中，我假设你有静态命名的 JSON 文件。

然后，您需要使用 javascript 使链接触发 loadResults 函数。在这种情况下，我添加了一个 onClick 属性以在单击链接时调用该函数。

在下面的代码中，我从一个公共 Dropbox 文件夹加载 JSON 文件，但它的加载方式会为每个不同的体育赛事加载相同的 JSON 数据。但它可以让你看到它在行动。

$(document).ready(function() {
  $.getJSON('https://dl.dropboxusercontent.com/s/wu2tc52r243vd4e/events.json', function (data) {
    var $menu = $('#navbarNav ul.navbar-nav');
    $.each(data, function () {
      var url = this.url || '#';
      $menu.append(
        '<li class="nav-item">' +
        '<a class="nav-link" href="#" onClick="loadResults(\'' + this.name + '\')">' + (this.name || this.id) + '</a>' +
        '</li>'
      );
    });
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Events</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav"></ul>
    </div>
</nav>

<div class="container">
    <table class="table table-borderless menu" id="results_table" style="display: none;">
        <thead>
            <tr>
                <th scope="col">Rank</th>
                <th scope="col">Country</th>
                <th scope="col">Athlete</th>
                <th scope="col">Time</th>
                <th scope="col">Points</th>
            </tr>
        </thead>
    </table>
</div>

<script>
  var resultsLoading = false;
  function loadResults(eventType) {
    console.log("loadResults " + eventType);
    // close the menu if it was open
    $('.menu').slideUp("slow")

    // clear out the old menu
    $('#results_table tbody').empty();

    // build the JSON file name and replace spaces with underscores
    var jsonFile = eventType.split(" ").join("_") + ".json";
    
    if (!resultsLoading) {
      resultsLoading = true
      $.getJSON("https://dl.dropboxusercontent.com/s/jqodu1jopchc93y/"+jsonFile, function (data) {
        var results_table = '';
        $.each(data, function (key, value) {
          results_table += '<tr>';
          results_table += '<td>' + value.Rank + '</td>';
          results_table += '<td>' + value.Country + '</td>';
          results_table += '<td>' + value.Athlete + '</td>';
          results_table += '<td>' + value.Time + '</td>';
          results_table += '<td>' + value.Points + '</td>';
          results_table += '</tr>';
        });
        $('#results_table').append(results_table);
        // show the menu again
        $('.menu').slideDown("slow");
        resultsLoading = false;
      });
    } else {
      console.log('results are being loaded, please wait');
    }
  }

</script>

于 2019-04-12T14:34:11.513 回答