獲取json數組的下一個和上一個元素

Question

我的代碼需要幫助。 我想要一個上一個和下一個按鈕，這些將調用一個函數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; } 

 <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>