我的代码需要帮助。我想要一个上一个和一个下一个按钮,这些按钮将调用函数 viewBlogItem(direction,cat,blogid);
在该函数中,我将读出 json 文件,并按“类别”进行分类。
每个blogItem都有一个articleid和一个类别,如果单击“下一步”按钮,我想要下一个blogItem.articleid并显示该条目(我使用append来显示该条目)。如果方向==“下一个”,那么它会查看类别中是否有下一个项目,如果没有则隐藏$('.next')。上一个按钮也是如此 $('.previous')
blogItems.json
{
"blogItem":[
{
"id": 1,
"title": "animals blog 1",
"category":"animals",
"text":"text",
"articleid":1
},
{
"id": 2,
"title": "lifestyle blog 1",
"category":"lifestyle",
"text":"text",
"articleid": 1
},
{
"id": 3,
"title": "animals blog 2",
"category":"animals",
"text":"text",
"articleid": 2
},
{
"id": 5,
"title": "animals blog 4",
"category":"dieren",
"text":"text",
"articleid":4
},
{
"id": 4,
"title": "animals blog 5",
"category":"animals",
"text":"text",
"articleid":3
}
]
}
jquery
function viewBlogItem(direction,cat,blogid) {
var id = "";
if(direction == "next"){
// code for showing next blogitem
//if no next then
$('').hide();
}
else{
// if no previous then hide
//code for showing previous blogitem
}
loadBlog(id);
}
function loadBlog(blogid){
$.getJSON('blogitems.json', function (data) {
$.each(data.blogItem, function (i, item) {
if (item.id == blogid) {
$('.view').append('all sorts of stuff');
return;
}
});
});
}
我还想对我的 json 结构提出一些建议。
最佳答案
How can I tell that there ain't another blog after or previous?
查看当前博客项目的索引,看看下一个博客项目是否大于数组中的项目数,或者前一个博客项目是否小于 0。
var blogs = {
"blogItem": [{
"id": 1,
"title": "animals blog 1",
"category": "animals",
"text": "text",
"articleid": 1
}, {
"id": 2,
"title": "lifestyle blog 1",
"category": "lifestyle",
"text": "text",
"articleid": 1
}, {
"id": 3,
"title": "animals blog 2",
"category": "animals",
"text": "text",
"articleid": 2
}, {
"id": 5,
"title": "animals blog 4",
"category": "dieren",
"text": "text",
"articleid": 4
}, {
"id": 4,
"title": "animals blog 5",
"category": "animals",
"text": "text",
"articleid": 3
}]
};
var index = 0;
var item = blogs.blogItem[index];
var title = document.getElementById('title');
var text = document.getElementById('text');
var previous = document.getElementById('previous');
var next = document.getElementById('next');
displayItem(item);
previous.addEventListener('click', function() {
displayItem(blogs.blogItem[--index]);
});
next.addEventListener('click', function() {
displayItem(blogs.blogItem[++index]);
});
function displayItem(item) {
title.innerText = item.title;
text.innerText = item.text;
previous.disabled = index <= 0;
next.disabled = index >= blogs.blogItem.length -1;
}
[disabled] {
opacity: 0.5;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<div class="container">
<div>
<div id="title"></div>
<div id="text"></div>
</div>
<button id="previous">Previous</button>
<button id="next">Next</button>
</div>
关于javascript - 获取 json 数组的下一个和上一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38963412/