Question

我有一个div（兄弟姐妹）列表。在页面加载时，第一个div是可见的，其余的隐藏。单击按钮时，我需要隐藏当前可见的div并显示下一个div。可见最后一个div后，单击按钮时，它需要循环回到可见的第一个div并隐藏最后一个div。我不确定正确的方法是什么，但是我已经为此花了好几个小时不停地挠头！请帮忙！下面是我到目前为止的代码。活动类将在CSS中附加有display：块。 div全部显示：无任何开头。

 $('.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

我为您的解决方案创建了一个小提琴：看看这个 @ 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列表并切换可见性

3 个答案: