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

Question

我的代码需要帮助。我想要一个上一个和一个下一个按钮，这些按钮将调用函数 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 结构提出一些建议。

Answer 1

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>