在时间上向前和向后循环数组？

Question

这是我的第一个问题，我希望在这里找到答案。我有一个阵列

var arr = ['red', 'blue', 'black', 'green'];

我想循环它，所以每次我点击一个console.log();时我都可以btn一个元素并继续跟踪索引，所以如果我点击一个不同的btn我可以向后迭代。

nextBtn.addEventListener('click',nextItem)

prevBtn.addEventListener('click',prevItem)

谢谢

Answer 1

您可以对索引进行闭包并返回一个带有该函数的对象，以获取该数组的下一个或上一个值。

var array = ['red', 'blue', 'black', 'green'],
    index = function (i) {
        var out = document.getElementById('out');

        out.innerHTML = array[i];
        return {
            prev: function () {
                i && i--;
                out.innerHTML = array[i];
            },
            next: function () {
                i + 1 < array.length && i++;
                out.innerHTML = array[i];
            }
        }    
    }(0);

document.getElementById('nextBtn').addEventListener('click', index.next);
document.getElementById('prevBtn').addEventListener('click', index.prev);

<button id="prevBtn">prev</button> <span id="out"></span> <button id="nextBtn">next</button>

Answer 2

在每个函数中，您可以通过递增/递减一个跟踪当前位置的全局变量来获取数组中元素的当前索引。为了防止在数组上方/下方，您需要在每个数组中提供条件。

var arr = ['red', 'blue', 'black', 'green'];
var currentIndex = 0;

var nextBtn = document.getElementById('nextBtn');
var prevBtn = document.getElementById('prevBtn');

nextBtn.addEventListener('click', nextItem);

prevBtn.addEventListener('click', prevItem);

function nextItem() {
  if (currentIndex === (arr.length - 1)) {
    return;
  }
  
  console.log(
    arr[++currentIndex]
  );
}

function prevItem() {
  if (currentIndex === 0) {
    return;
  }
  
  console.log(
    arr[--currentIndex]
  );
}

<button id="prevBtn">Prev</button>
<button id="nextBtn">Next</button>