从json获取数据，如使用javascript和jquery加载更多

嗨，我是javascript的noob并且做练习以提高我的技能。

我做了一个示例项目，并使用getJSON从json获取数据。

它工作正常，但我想要的是先显示第三个索引数据，然后单击loadMore按钮。

喜欢首先我会用json填充“3 list item”之后我需要每2 li才能填充loadMore点击…这里是我的json数组

[ { "imagepath" : "sample url", "heading" : "sample heading", "details" : "sample details" }, { "imagepath" : "sample url", "heading" : "sample heading", "details" : "sample details" }, { "imagepath" : "sample url", "heading" : "sample heading", "details" : "sample details" }, { "imagepath" : "sample url", "heading" : "sample heading", "details" : "sample details" }, { "imagepath" : "sample url", "heading" : "sample heading", "details" : "sample details" }, { "imagepath" : "sample url", "heading" : "sample heading", "details" : "sample details" }, { "imagepath" : "sample url", "heading" : "sample heading", "details" : "sample details" }, ] 

这是示例代码

 $(document).ready(function(){ $('#fetchit').click(function(){ $.ajax({ url:"one.json", cache: false, dataType : "json", success :function(){ //alert('bf c') $('.hold').empty(); $.getJSON("one.json",function(data){ $.each(data ,function(i,value){ var list ="
" + "" + "" + value.heading + "" + "" + value.details + "" $('.hold').append(list) }) }) }, error:function(xhr,status,error){ alert(xhr.status) } }) }) }); 

这段代码只需点击一下即可获取整个json，但我想解析它或在点击时加载部分。 请使用ajax getJSON或javascript帮助我。 我无法做出loadMore的逻辑，我知道我们必须通过一些反击来做到这一点……

Answer 1

试试这个： – http://jsfiddle.net/adiioo7/8erwrha2/

JS： –

 var json = [{ "imagepath": "sample url", "heading": "sample heading", "details": "sample details" }, { "imagepath": "sample url", "heading": "sample heading", "details": "sample details" }, { "imagepath": "sample url", "heading": "sample heading", "details": "sample details" }, { "imagepath": "sample url", "heading": "sample heading", "details": "sample details" }, { "imagepath": "sample url", "heading": "sample heading", "details": "sample details" }, { "imagepath": "sample url", "heading": "sample heading", "details": "sample details" }, { "imagepath": "sample url", "heading": "sample heading", "details": "sample details" }]; jQuery(function ($) { $.each(json, function (i, value) { var list = "
" + "" + "" + value.heading + "" + "" + value.details + "" $('.hold').append(list); }); function loadMore(){ $(".hold .hidden").slice(0,2).removeClass("hidden"); } loadMore(); $("#btnLoadMore").on("click",loadMore); }); 

HTML： –

CSS： –

 .hidden { display:none; }