如何重復遍歷div

Question

我有一個腳本，可在單擊“下一步”或“上一步”按鈕時更改div顯示屬性。 我可以單擊“下一步”查看下一個div或單擊“上一個”查看上一個div； 但是，一旦到達末尾，classList將變為未定義或為null。 我想做的是，當頁面加載了第一時間時，我希望用戶單擊“ Next”（下一步）直到結尾，然后像循環那樣單擊第一個div。 另外，如果用戶單擊首頁上的Previous，則希望用戶看到最后一個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> 

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來實現。

樣品

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

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

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