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之类的库，因为它将使您的生活变得更加轻松从长远来看。

如何显示数组的下一个/上一个项目？

1 个答案: