javascript - 如何重复循环遍历div

Question

我有一个脚本，可以在单击“下一个”或“上一个”按钮时更改 div 显示属性。我可以单击“下一步”查看下一个 div，或者单击“上一个”查看上一个 div；然而，一旦到达末尾，classList 就会变得未定义或为 null。我想要做的是，当页面第一次加载时，我希望用户单击“下一步”直到结束，然后像循环一样单击第一个 div。另外，如果用户从第一页单击“上一页”，那么我希望用户看到最后一个 div。任何帮助表示赞赏。谢谢!下面是代码..

var yogNumber = 0;
var yogs = document.querySelectorAll('.yog');

function next() {
  yogNumber++;
  if (yogs.length > yogNumber) {
    document.querySelector('.active').classList.remove('active');
    yogs[yogNumber].classList.add('active');
  }

}

function previous() {
  yogNumber--;
  if (yogs.length > yogNumber) {
    document.querySelector('.active').classList.remove('active');
    yogs[yogNumber].classList.add('active');
  }

}

.yog {
  display: none
}
.active {
  display: block
}

<div class="yog active">
  <div id="heading">Text 1</div>
</div>

<div class="yog">
  <div id="heading">Text 2</div>
</div>

<div class="yog">
  <div id="heading">Text 3</div>
</div>

<div class="yog">
  <div id="heading">Text 4</div>
</div>
<br />
<div id="left" onclick="previous()">
  <</div>
    <br />
    <div id="right" onclick="next()">></div>

我目前收到的错误是“TypeError:无法读取未定义的属性'classList'”。

Answer 1

请尝试以下。

var yogNumber = 0;
var yogs = document.querySelectorAll('.yog');

function next() {
  yogNumber++;
  if (yogs.length > yogNumber) {
    document.querySelector('.active').classList.remove('active');
    yogs[yogNumber].classList.add('active');
  }
  else{
    yogNumber=0;
    document.querySelector('.active').classList.remove('active');
    yogs[yogNumber].classList.add('active');
    }

}

function previous() {
  yogNumber--;
  if(yogNumber<0)
    {
      document.querySelector('.active').classList.remove('active');
    yogs[yogs.length-1].classList.add('active');
      yogNumber=yogs.length-1;
      }
  else if (yogs.length > yogNumber) {
    document.querySelector('.active').classList.remove('active');
    yogs[yogNumber].classList.add('active');
  }

}

.yog {
  display: none
}
.active {
  display: block
}

<div class="yog active">
  <div id="heading">Text 1</div>
</div>

<div class="yog">
  <div id="heading">Text 2</div>
</div>

<div class="yog">
  <div id="heading">Text 3</div>
</div>

<div class="yog">
  <div id="heading">Text 4</div>
</div>
<br />
<div id="left" onclick="previous()">
  <</div>
    <br />
    <div id="right" onclick="next()">></div>