[英]Fetch data from json like load more using javascript and 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 ="<li>" + "<img src'" + value.imagepath + "' alt=''/>" + "<span>" + value.heading + "</span>" + "<span>" + value.details + "</span>"
$('.hold').append(list)
})
})
},
error:function(xhr,status,error){
alert(xhr.status)
}
})
})
});
這個代碼只需點擊一下即可獲取整個json,但我想解析它或在點擊時將其加載到各個部分。 請使用ajax getJSON或javascript幫助我。 我無法做出loadMore的邏輯,我知道我們必須通過一些反擊來做到這一點......
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 = "<li class='hidden' >" + "<img src'" + value.imagepath + "' alt=''/>" + "<span>" + value.heading + "</span>" + "<span>" + value.details + "</span>"
$('.hold').append(list);
});
function loadMore(){
$(".hold .hidden").slice(0,2).removeClass("hidden");
}
loadMore();
$("#btnLoadMore").on("click",loadMore);
});
HTML: -
<div class="hold"></div>
<input type="button" id="btnLoadMore" value="Load More"/>
CSS: -
.hidden {
display:none;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.