单击按钮时，循环浏览 div 列表并切换可见性

Question

我有一份 div（兄弟姐妹）的名单。在页面加载时，第一个 div 是可见的，其余的是隐藏的。单击按钮时，我需要隐藏当前可见的 div 并显示下一个。一旦最后一个 div 可见，当按钮被点击时，它需要循环回到第一个 div 可见并隐藏最后一个 div。我不确定正确的方法是什么，但几个小时以来我一直在摸不着头脑！请帮忙！下面是我目前所拥有的代码。活动 class 将在 CSS 中附加显示：块。 div 全部显示为：none 开头。

 $('.hp-blurb').first().addClass('active');

 $('.red-btn').click(function() {

   $('.hp-blurb').removeClass('active');
   $('.hp-blurb').next().siblings().addClass('active');

});

这是我的HTML：

<div class="red-btn">
  <img src="/red-btn.png" alt="red button" /> <spam class="red-btn-text" >PUSH ME</spam>
</div>
<div class="container">
  <div class="hp-blurb">                           
A gorilla has escaped from the ATLANTA zoo. An ENSEMBLE of zookeepers are trying to find it. In the event the gorilla SHOWS signs of fear it could attack.
  </div>
  <div class="hp-blurb">                           
A gorilla has escaped from the ATLANTA zoo. An ENSEMBLE of zookeepers are trying to find it. In the event the gorilla SHOWS signs of fear it could attack.
  </div>
  <div class="hp-blurb">                           
A gorilla has escaped from the ATLANTA zoo. An ENSEMBLE of zookeepers are trying to find it. In the event the gorilla SHOWS signs of fear it could attack.
  </div>
</div>

Answer 1

是这样的吗？

var normalDivs = [];
var focusDiv;

function loopThru(){
  focusDiv +=1;
  if (focusDiv > normalDivs.length-1){
    focusDiv = 0;
  }
  $('.normal').each(function(){
    $(this).css('visibility','hidden');
  });
  normalDivs[focusDiv].css('visibility','visible');
}

$(document).ready(function(){
  $('.normal').each(function(){
    normalDivs.push($(this));
  });
  focusDiv = 0;
  normalDivs[focusDiv].css('visibility','visible')
  $('.button').click(loopThru);
  
});

.normal, .button{
  user-select: none;
  background-color: red;
  color: white;
  display: inline-block;
  padding: 20px;
  font-size: 20px;
}

.normal{
  visibility: hidden;
}

.button{
  background-color: teal;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="normal">div 1</div>
<div class="normal">div 2</div>
<div class="normal">div 3</div>
<div class="normal">div 4</div>
<div class="normal">div 5</div>
<div class="normal">div 6</div>
<div class="button">button</div>

Answer 2

我已经为您的解决方案创建了一个 fiddle：看看这个 @ https://jsfiddle.net/harshapache/89norsk6/

$('.hp-blurb').first().addClass('active');
  var totalHpBlurb = 0;
  $('.hp-blurb').each(function(){
  totalHpBlurb++;
  $(this).attr('data-index',totalHpBlurb);
});

 $('.red-btn').click(function() {
   var index = $('.hp-blurb.active').attr('data-index');
   $('.hp-blurb.active').removeClass('active');

   if(index < totalHpBlurb){
     index++;
     $('.hp-blurb[data-index="'+index+'"]').addClass('active');
   }else{
     $('.hp-blurb[data-index="1"]').addClass('active');
   }
 });

Answer 3

非常基本的 vanilla JS 解决方案：

function cycleVisibility(ev) {
  ev.preventDefault();

  // get a nodeList of all the divs
  const nlist = document.querySelectorAll('div.hp-blurb');

  for (let i = 0; i < nlist.length; i++) {

    // if div is active, that class name will be removed
    if (nlist[i].className.includes('active')) {
      nlist[i].classList.remove('active');

      // check wheter you're at the end of nodeList 
      const nextIndex = i < nlist.length - 1 ? i + 1 : 0;

      // and add the class that makes next (or first) div visible
      nlist[nextIndex].classList.add('active');

      // exit the loop
      break;
    }
  }
}

document.querySelector('div.hp-blurb').classList.add('active');
document.querySelector('div.red-btn').addEventListener('click', cycleVisibility, false);

这里是JS Fiddle

单击按钮时，循环浏览 div 列表并切换可见性

On button click, cycle through a list of divs and toggle visibility

html

jquery

show

siblings

hide