javascript - Jquery:当文档准备好时，如何将我的Jquery中的所有数据返回到html？

Question

我有一个 HTML 页面，它必须从 JSON 返回数据。我创建了一个过滤器，它根据过滤器返回值。我的问题是，当文档准备好时，页面没有显示所有值，即使我默认选中单选按钮“全部”。当我稍后单击单选按钮时它会起作用。有人可以帮助我如何在页面启动时返回所有值吗？

这是我的 fiddle :http://jsfiddle.net/sDsCM/805/

HTML:

<fieldset class="question">
   <input class="hello" type="radio" name="filter" value="All" checked/>
   <span class="item-text">All</span>
   <input class="hello" type="radio" name="filter" value="1"/>
   <span class="item-text">One</span>
   <input class="hello" type="radio" name="filter" value="2" />
   <span class="item-text">Two</span>
   <input class="hello" type="radio" name="filter" value="3" />
   <span class="item-text">Three</span>
</fieldset>

<div id="dbg">

</div>

JavaScript:

  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);
        });
   });

Answer 1

您的 API 似乎无法正常工作，消息是“当天配额耗尽”，但我已经更新了代码，您可以在下面的 snipeet 中找到您只需添加一个在页面上加载数据的功能加载以及更改功能

var i;
  var el = $('#dbg');
	    var HtmlData = 	LoadData();
  el.html(HtmlData);
  $("input[name=filter]").on('change', function () {
	var no = $(this).val
	i=no;
	var HtmlData = 	LoadData();
    el.html(HtmlData);
  });
        
    function LoadData()
    {
     var dmJSON="http://api.railwayapi.com/route/train/12728/apikey/3dacdecg/";
     var html = '<div class="row s12"/>';
		$.ajax({
		  url: dmJSON,
		  dataType: 'json',
		  async: false,
		  data: {},
		  success: function(data) {
		  $.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>"
      }
			});
                    
		}
    });
   return html;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="question">
       <input class="hello" type="radio" name="filter" value="All" checked/>
       <span class="item-text">All</span>
       <input class="hello" type="radio" name="filter" value="1"/>
       <span class="item-text">One</span>
       <input class="hello" type="radio" name="filter" value="2" />
       <span class="item-text">Two</span>
       <input class="hello" type="radio" name="filter" value="3" />
       <span class="item-text">Three</span>
   </fieldset>

   <div id="dbg">
      
   </div>