获取json数组的下一个和上一个元素

我的代码需要帮助。 我想要一个前一个和下一个按钮，这些将调用一个函数viewBlogItem（direction，cat，blogid）;

在该函数中，我将读出json文件，按“类别”分类。

每个blogItem都有一个articleid和一个类别，如果单击下一个按钮我想拥有下一个blogItem.articleid并显示那个（我使用追加那个）。 如果方向==“下一步”，则表示它是否在类别中有下一个项目，如果没有，则隐藏$（’。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结构提出一些建议。

Answer 1

如何判断之后或之前没有其他博客？

查看当前博客项目的索引，看看下一个博客项目是否大于数组中的项目数，或者前一个项目是否小于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; } 

  
 
 
 
 
 Previous Next