Javascript Jquery：当文档准备就绪时，如何将Jquery中的所有数据返回到html？

我有一个HTML页面，它必须从JSON返回数据。我制作了一个过滤器，它根据过滤器返回值。这里我的问题是，当文档准备就绪时，页面并没有显示所有值，即使我默认选中了单选按钮“all”。当我稍后单击单选按钮时，它会工作。有人能帮助我在页面启动时如何返回所有值吗

这是我的小提琴：

Html:

全部的
一个
两个
三

Javasript：

  var i;

  $("input[name=filter]").on('change', function () {
        var no = $(this).val();                
        i=no;
        var dmJSON="http://api.railwayapi.com/route/train/12728/apikey/3dacdecg/";

        $.getJSON( dmJSON, function(data) {
                var el = $('#dbg');
                var html = '<div class="row s12"/>';
                $.each(data.route, function(key, value) {                  
                     if(i=="All"){                  
                        html +='<div class="card small">' +'<div align="center">' + value.no + "<br><br>" + value.fullname + "</div>" + "</div>" +"</div>"
                     }
                     else if(value.no==i){
                        html +='<div class="card small">' +'<div align="center">' + value.no + "<br><br>" + value.fullname + "</div>" + "</div>" +"</div>"
                     }      
                });
                el.html(html);
        });
   });

vari；
$（“输入[name=filter]”）。在（'change'，函数（）{
var no=$（this.val（）；
i=否；
var dmJSON=”http://api.railwayapi.com/route/train/12728/apikey/3dacdecg/";
$.getJSON（dmJSON，函数（数据）{
var el=$（“#dbg”）；
var html=''；
$.each（data.route，函数（键，值）{
如果（i==“全部”）{
html+=''+'+value.no+'

“+value.fullname++”
}
else if（value.no==i）{
html+=''+'+value.no+'

“+value.fullname++”
}      
});
html（html）；
});
});

您的API似乎不起作用消息是“一天的配额用完了”，但我已经更新了代码，您可以在下面的snipeet中找到，您只需添加一个函数，即在页面加载和更改函数中加载数据

vari；
var el=$（“#dbg”）；
var HtmlData=LoadData（）；
html（HtmlData）；
$（“输入[name=filter]”）。在（'change'，函数（）{
var no=$（this.val）
i=否；
var HtmlData=LoadData（）；
html（HtmlData）；
});
函数LoadData（）
{
var dmJSON=”http://api.railwayapi.com/route/train/12728/apikey/3dacdecg/";
var html=''；
$.ajax({
url:dmJSON，
数据类型：“json”，
async:false，
数据：{}，
成功：功能（数据）{
$.each（data.route，函数（键，值）{
如果（i=“全部”）{
html+=''+'+value.no+'

“+value.fullname++”
}
else if（value.no==i）{
html+=''+'+value.no+'

“+value.fullname++”
}
});
}
});
返回html；
}

全部的
一个
两个
三

10/10我见过的格式最好的代码我看到的是，您只绑定了单选按钮的更改事件。您需要将所有内容包装在一个函数中，该函数应该在更改事件时以及首次加载dom时调用“即使我将单选按钮“all”设置为默认选中”-确切地说，是页面加载时已设置的默认值-因此自然不会触发更改事件，但您的脚本仅由该事件触发。简单的解决方案：在页面加载时从脚本中触发该事件，使用它与以前一样工作。启动页面时无法获取“全部”数据。你能帮帮我吗。当页面启动时，我如何在没有任何条件的情况下传递LoadData（），

var i=“All”

用这个替换第一行，希望事情能按预期进行，因为我无法检查，因为api已损坏，所以如果有任何错误，请尝试此方法，让我知道效果非常好。谢谢，伙计。你太棒了。哦，很高兴它能帮助你

  var i;

  $("input[name=filter]").on('change', function () {
        var no = $(this).val();                
        i=no;
        var dmJSON="http://api.railwayapi.com/route/train/12728/apikey/3dacdecg/";

        $.getJSON( dmJSON, function(data) {
                var el = $('#dbg');
                var html = '<div class="row s12"/>';
                $.each(data.route, function(key, value) {                  
                     if(i=="All"){                  
                        html +='<div class="card small">' +'<div align="center">' + value.no + "<br><br>" + value.fullname + "</div>" + "</div>" +"</div>"
                     }
                     else if(value.no==i){
                        html +='<div class="card small">' +'<div align="center">' + value.no + "<br><br>" + value.fullname + "</div>" + "</div>" +"</div>"
                     }      
                });
                el.html(html);
        });
   });