Question

这是我编写的代码，我的任务是这样：我有来自这里的json文件：http://ergast.com/api/f1/+SEASON+/drivers.json 有两个季节：2016年和2017年，因此我需要两个json文件。我必须列出三个清单。第一个应该包含2016年以来的json文件，因此http://ergast.com/api/f1/2016/drivers.json 并且应仅包含名字和姓氏第二个应该包含2017年以来的json文件，因此 http://ergast.com/api/f1/2017/drivers.json 并且还应包含名字和姓氏在第三个列表上应该包含我最喜欢的驱动程序，因此它需要可排序的ui，以便我可以将其拖放到该列表上，反之亦然，当第三个列表上有人时，我的意思是名字和姓氏，然后单击全名应包含其他信息，例如号码，出生日期，国籍。。工具提示正在运行，但是当我单击第二个选项卡时，我无法返回到第一个请帮忙！

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
      <title>Formula 1</title>
      <script>
         function getEntries(u,l) {
             $.ajax({
                url: u,
                dataType: "jsonp",
                 success: function (data) {
                     $.each(data.Drivers, function (i,item) {
                         var name = item.givenName;
                         var surname = item.familyName;
                         var num = item.permanentNumber;
                         var date = item.dateOfBirth;
                         var nationality = item.nationality;
                         var strana = item.url;
                         l.append("<div class='container2'><ol><li>Name: '+name+', Surname: '+surname+'</li></ol>");
                     });
                 }


             });
         }
         $(document).ready(function () {
             var u1 = "http://ergast.com/api/f1/2016/drivers.json";
             var u2 = "http://ergast.com/api/f1/2017/drivers.json";

             var l1 = $('#list1');
             var l2 = $('#list2');

             getEntries(u1,l1);
             $("#tabs").tabs({
                 beforeActivate: function (uevenet,ui) {
                     if(ui.newTab.index()==0) {
                         if($("#list1 li").size()==0) {
                             getEntries(u1,l1);
                         }
                     }
                     else if(ui.newTab.index()==1)
                     {
                         if($("#list2 li").size == 0)
                         {
                             getEntries(u2,l2);
                         }
                     }
                 }
             });

             $("#list3").sortable({});

             $( "#list1" ).sortable({
                 connectWith: "#list3"
             });
             $( "#list2" ).sortable({
                 connectWith: "#list3"
             });
             $( "#list1, #list2, #list3" ).disableSelection();

             $(document).tooltip({
                 items: "#list3 li, #list2 li, #list1 li",
                 content: function(){
                     var el = $(this);
                     var br = el.attr("num");
                     var datum = el.attr("date");
                     var nacionalnost = el.attr("nationality");
                     var link = el.attr("strana");

                     return "Number of driver: " +  br +
                            "Datum na raganje" + datum +
                            "Nacionalnost" + nacionalnost +
                            "Url do vozac" + link;
                 }
             });


         })

      </script>
      <style>
         .container{
         float:left;
         margin:20px;
         padding: 5px;
         }
         .container1{
         float:right;
         padding: 5px;
         }
         .container2{
         width: 500px;
         }
         .li:nth-child(odd) { background: white;}
         .li:nth-child(even) { background: lightblue; }
         .container{
         border-left: 1px lightgray solid;
         }
         #list1, #list2, #list3{
         list-style-type: none;
         }
         .row-selected{
         background:lightblue;
         }
      </style>
   </head>
   <body>
      <div id="tabs" style="min-height:5000px">
         <ul>
            <li><a href="#tabs-1">2016 Drivers</a></li>
            <li><a href="#tabs-2">2017 Drivers</a></li>
         </ul>
         <div id="tabs-1">
            <div class="container" style="float:left">
               <strong>2016 Drivers</strong>
               <ul id="list1"></ul>
            </div>
         </div>
         <div id="tabs-2">
            <div class="container" style="float:left">
               <strong>2017 Drivers</strong>
               <ul id="list2"></ul>
            </div>
         </div>
         <div id="fav" class="container1" style="float:left">
            <strong>Favourites</strong>
            <ul id="list3">
               <li>Drop you favourite drivers here...</li>
            </ul>
         </div>
      </div>
   </body>
</html>

Answer 1

修复Json返回对象的值 $ .each（ data.MRData.DriverTable.Drivers ，函数（i，item）{...}

修复“和”混合。名称：“ +名称+”，姓：“ +姓+”

使用长度而不是大小 if（$（“＃list1 li”）。长度 == 0）

有关更多错误消息，请参阅开发人员工具中的控制台窗口。

使用jQuery Ajax从URL加载JSON文件的问题

1 个答案: