0
votes

Sur le bouton, cliquez sur la liste des divs et de la visibilité des DIV.

J'ai une liste de divs (frères et sœurs). Sur la charge de la page, le premier div est Visibile et le reste caché. Sur le bouton Cliquez sur le bouton, j'ai besoin du courant Visible Div pour masquer et le suivant à afficher. Une fois que la dernière Div est visible, lorsque le bouton est cliqué, il doit revenir à la première div visible et en cache la dernière DIV. Je ne suis pas sûr de la bonne approche, mais je me gratte la tête pendant des heures! S'il vous plaît aider! Code ci-dessous de ce que j'ai jusqu'à présent. La classe active aura affichage: bloc attaché à celui-ci dans le CSS. Les DIV sont tous affichés: Aucun à commencer.

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

jquery html hide show siblings

0 commentaires

3 Réponses :

1
votes

quelque chose comme ça?

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

0 commentaires

1
votes

J'ai créé un violon pour votre solution: Vérifiez-le @ https://jsfiddle.net/harshapache/89norsk6/ xxx < / p>

0 commentaires

1
votes

solution très basique avec 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);

0 commentaires