获取json数组的下一个和上一个元素 [英] Getting next and previous element of json array

问题描述

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

I need help with my code. I want to have a previous and a next button, these will call a function viewBlogItem(direction,cat,blogid);

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

in that function i'll be reading out the json file, categorizing by the "category".

每个blogItem都有一个articleid和一个类别，如果单击下一个按钮我想拥有下一个blogItem.articleid并且有显示的那个（我使用附加的那个）。如果方向==下一步，则表示它是否在类别中有下一个项目，如果没有，则隐藏$（'。next'）。同样适用于上一个按钮$（'。previous'）

Every blogItem has a articleid and a category, if click the next button I want to have the next blogItem.articleid and have that one shown (I use append for that one). If the direction == "next", then it look if it has a next item in category, if not then hide $('.next'). Same goes for previous button $('.previous')

blogItems.json

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有一些建议。

I would also like to have some suggestions for the structure my json.

推荐答案

我怎么知道之后或之前没有其他博客？

How can I tell that there ain't another blog after or previous?

查看当前博客项目的索引，看看下一个博客项目的索引是否大于数组中项目的数量，或者前一个项目是否为小于0.

Look at the index of the current blog item and see if the next one is bigger than than the number of items in the array or if the previous one is less than 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>

这篇关于获取json数组的下一个和上一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！