如何重复循环div

Question

我有一个脚本，可以在单击“下一个”或“上一个”按钮时更改div显示属性。我可以单击Next并查看下一个div或单击Previous以查看上一个div;但是，一旦到达最后，classList变为undefined或null。我想要做的是，当第一次加载页面时，我希望用户单击Next直到结束，然后单击循环中的第一个div。此外，如果用户点击第一页上的Previous，那么我希望用户看到最后一个div。任何帮助表示赞赏。谢谢！以下是代码..

＆＃13;

＆＃13;

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');
  }

}

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我目前得到的错误是＆＃34; TypeError：无法读取属性＆＃39; classList＆＃39;未定义＆＃34;。

Answer 1

请在下面试试。

＆＃13;

＆＃13;

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');
  }

}

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加一个else子句，如果长度达到最后一个yog，则将yogNumber设置为0。即。

        function next(){
          yogNumber++;
          if(yogs.length>yogNumber)
          {
            activateDiv(yogNumber);
          }else{
            yogNumber = 0;
           activateDiv(yogNumber);

          }
        }

我会提取使div对某个函数有效的逻辑，即

function activateDiv(var divNumber){
  document.querySelector('.active').classList.remove('active');
  yogs[divNumber].classList.add('active');
}

Answer 3

var divs = document.getElementsByClassName('yog'),
    yog = 0;

function next(){
    yog++;

    if(yog < divs.length)
        yog = 0;
}

如果yog超过divs.length，则将yog设置为0.

Answer 4

您不需要循环div。您可以使用.next和.prev来执行此操作。

示例

＆＃13;

＆＃13;

function next() {
  var d = $(".yog.active");
  if (d.next().hasClass("yog"))
    d.removeClass("active")
    .next()
    .addClass("active");
}

function previous() {
  var d = $(".yog.active");
  if (d.prev().hasClass("yog"))
    d.removeClass("active")
    .prev()
    .addClass("active");
}

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<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>

＆＃13;

＆＃13;

＆＃13;