Question

我要遍历此数组。

const array = ['item1', 'item2', 'item3', 'item4', 'item5'];

默认情况下，在div中显示第一个项目，并使用按钮在同一div中显示下一个项目（也替换旧项目），但我确实尝试过此方法，但是没有用

const quizConainer = document.getElementById('quiz');
const next = document.getElementById('next');

    const array = [
      '<h1>item1</h1>',
      '<h1>item2</h1>',
      '<h1>item3</h1>',
      '<h1>item4</h1>',
      '<h1>item5</h1>',
    ];

    quizConainer.innerHTML = array[0];

    function nextItem() {
      for (let i = 0; i < array.length; i++) {
        if (quizConainer.innerHTML === array[i]) {
          quizConainer.innerHTML = array[i++];
        }
      }
    }

    next.addEventListener('click', nextItem);

然后就是

 <div id=""></div>
 <button id="next">Next</button>

Answer 1

您可以创建一个counter并跟踪显示中的当前元素。由于默认显示第一个元素，因此无需将其放入数组中。

const quizConainer = document.getElementById('quiz');
const next = document.getElementById('next');
const array = [
  '<h1>item2</h1>',
  '<h1>item3</h1>',
  '<h1>item4</h1>',
  '<h1>item5</h1>',
];
let counter = 0

function nextItem() {
  if (counter < array.length) {
    quizConainer.innerHTML = array[counter];
    counter++;
  }

}

next.addEventListener('click', nextItem);

<div id="quiz">
  <h1>item1</h1>
</div>
<button id="next">Next</button>

Answer 2

声明一个全局变量。这可以帮助您，而不是循环。编辑：添加了jsfiddle

<div id="quiz"></div>
<button id="next">Next</button>
<script>
    const quizConainer = document.getElementById('quiz');
const next = document.getElementById('next');
    let i = 1;
    const array = [
    '<h1>item1</h1>',
    '<h1>item2</h1>',
    '<h1>item3</h1>',
    '<h1>item4</h1>',
    '<h1>item5</h1>',
    ];

    quizConainer.innerHTML = array[0];

    function nextItem() {
        i = i % array.length;   //If you want it reset and start from first on traversing the entire array
        console.log(i);
        quizConainer.innerHTML = array[i];
        i = i +1;
    }

    next.addEventListener('click', nextItem);
</script>

Answer 3

请选中此

在此示例中，我添加了一个全局变量来保存正在使用的数组的当前位置。并且仅使用该特定变量进行检查。另外，将HTML标签保存在数组中也不是一个好习惯。所以我也改变了。

该示例将从第零个位置开始，并将迭代到数组的末尾，然后再次从头开始。

const quizConainer = document.getElementById('quiz');
const next = document.getElementById('next');
let currPosition = 0; //To hold the element which is currently in DOM

const array = ['item1', 'item2', 'item3', 'item4', 'item5'];

quizConainer.innerHTML = '<h1>' + array[0] + '</h1>';

function nextItem() {
  if(currPosition === array.length - 1)
    currPosition = 0;
  else 
    currPosition++;
    
  quizConainer.innerHTML = '<h1>' + array[currPosition] + '</h1>'
}

next.addEventListener('click', nextItem);

 <div id="quiz"></div>
 <button id="next">Next</button>

使用按钮分别遍历arraylist和display元素

3 个答案: