gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 05:09:14 24 4
gpt4 key购买 nike

我有一个 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);
});
});

最佳答案

您的 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>

关于javascript - Jquery:当文档准备好时,如何将我的Jquery中的所有数据返回到html?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41889701/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com