如何顯示數組的下一個/上一個項目？

Question

我正在將數組的第一項寫入屏幕，並想為數組創建“下一個/上一個”按鈕，但無法正常工作。 我嘗試了幾種方法，但是找不到合適的解決方案。

有人可以幫忙嗎？

這是我嘗試的最后一個：

        var data = [
            {"subject":"starcraft2",
             "date":"08.31",
             "dDay":"mon",
             "content1":"STARCRAFT2",
             "content2":"season2",
             "playerA":"Ju",
             "playerB":"Lee",
             "emblemA":"Terran",
             "emblemB":"Zerg",
             "result":"end"},
            {"subject":"starcraft2",
             "date":"08.29",
             "dDay":"wed",
             "content1":"STARCRAFT2",
             "content2":"season2",
             "playerA":"kim",
             "playerB":"joo",
             "emblemA":"Terran",
             "emblemB":"Protoss",
             "result":"end"},
         ];

         function prevAction() {
             // function (e) { // the e here is the event itself
             alert("Prev Click!");
                 // document.getElementById('subject').textContent = prevItem();
                 // document.getElementById('date').textContent = prevItem();
                 for (var i = 0; i<data.length; i++)
                     for (var j=0; j<data[i]; j++)
                         while(j === 0)
                         {
                            j == j++;
                            console.log(j);
                         }
                     console.log(data[j].date + ', ');
                     document.getElementById('date').textContent = data[j].date;
                     // document.getElementById('subject').textContent = j[0];
                 }

Answer 1

這是您如何用純Javascript完成此工作的要旨：

getNextItem() {
  var index = document.getElementById("index").value;
  //add guards here to prevent array overflow/underflow
  if (data.length < index - 1) {
      index.value++; 
  }
  document.getElementById("DOM_ELEMENT_TO_ATTACH_DATA").innerHTML = data[index];
}

getPreviousItem() {
  var index = document.getElementById("index").value;
  //add guards here to prevent array overflow/underflow
  if (index > 0) {
    index.value--;
  } 
  document.getElementById("DOM_ELEMENT_TO_ATTACH_DATA").innerHTML = data[index];
}


<input id="index" type="hidden" name="index" value="0">
<button type="button" onclick="getNextItem()">Next Item</button>
<button type="button" onclick="getPreviousItem()">Previous Item</button>

請注意，這只會將純json數據附加到DOM元素，它不會做任何花哨的事情。

此外，如果您想做更復雜的事情，強烈建議您考慮使用jQuery或Angular之類的庫，因為從長遠來看，它將使您的生活變得更加輕松。