jquery : comment faire pour afficher la prochaine div et masquer la présente

J'ai besoin de cacher le présent div et de montrer ensuite masquer
voici mes codes

JS:

$(document).ready(function() {
  $('#next').click(function() {
    $(this).next().next().children("div").hide();
    $(this).next().next().children("div").show();
  });
});

CSS:

#div2,
#div3 {
  display: none;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button id="prev">Prev</button>
<button id="next">Next</button>
<hr />
<div id="main">
  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
  <div id="div3">Div 3</div>
</div>

DÉMO

InformationsquelleAutor Mo. | 2012-04-02

7

Regarder cette.
Poignées de début/de fin à l'aide de css classes, gardé js simple.
- merci ami, il est très utile pour moi
- Les Divs sont générés automatiquement, à l'aide d'une boucle à l'aide de XSLT et aucun moyen d'ajouter de la première ou de la dernière de la classe. Toute aide à ce sujet?
InformationsquelleAutor jb10210
3

Ce que quelque chose comme cela?
```
$(document).ready(function() { 

  var currentDiv = 0;
  $('#next').click(function() {
    $('#div' + (currentDiv + 1)).hide();
    currentDiv = (currentDiv + 1) % 3;
    $('#div' + (currentDiv + 1)).show();
  });
});
```
- serait mieux sans le mondial, cela suppose également la #main div seront toujours seulement ont 3 enfants... je suggère de faire % 3 dynamique
- yep, pourrait facilement mettre $('#div1').parent().children('div').length là-dedans, ou $('#div1').siblings('div').length + 1
InformationsquelleAutor sje397

essayer quelque chose d'un peu différent

$(document).ready(function() { 

    $('#next').click(function() {
          $eL=$('#main').children('div').filter(":visible");
          $('#main').children().hide();
          if($eL.next().length>0){
              $eL.next().show();
          }else{
               $('#main div')[0].show();
          }

    });

    $('#prev').click(function() {
          $eL=$('#main').children('div').filter(":visible");
          $('#main').children().hide();
          if($eL.previous().length>0){
              $eL.previous().show();
          }else{
               $('#main div')[$('#main div').length - 1].show();
          }

    });

});

edit: cette fonction suppose l'un de l'enfant divs est déjà visible lorsque le chargement de la page.

edit: ajout de bouton précédent

J'ai quelque chose comme ceci: jsfiddle.net/st8q8z5g/3 La précédente ne fonctionne pas et Prochains travaux à l'exception, comment puis-je le modifier afin de le il parcourt si c'est le dernier ou le premier?

InformationsquelleAutor Johnny Craig

Quelque chose comme ceci (suivant et précédent traitées):

.item{
    display:none;
}


var activeItem = 0;

function switchItem(isNext) {

        if (isNext) {
            activeItem++;
        } else {
            activeItem--;
        }

        activeItem = (activeItem == 3) ? 0 : activeItem;
        activeItem = (activeItem == -1) ? 2 : activeItem;

        showItem($("#main"), activeItem);
    }


    function showItem(selector, index) {

        selector.find(".item").hide().eq(index).toggle();
    }

<div id="main">   
    <div id="div1" class="item">Div 1</div>
    <div id="div2" class="item">Div 2</div>
    <div id="div3" class="item">Div 3</div>    
</div>

Vous pouvez également utiliser activeItem = (activeItem + 3) % 3;, pour simplifier un peu 😉 ou même activeItem = (activeItem + (isNext ? 1 : -1) + 3) % 3;

InformationsquelleAutor FiveTools

Ci-dessous est le code.

<ul class="grid">
   <li class="object">
     List Item 1<a class="show-next"> Show the next list item</a>
   </li>
        <li class="object">
     List Item 2
     <a class="show-next">Show the next list item</a>
   </li>
        <li class="object">
     List Item 3
     <a class="show-next">Show the next list item</a>
   </li>
</ul>

Ci-dessous le script, vous devez insérer.

$('.grid .object').hide().filter(':lt(1)').show();
$('.show-next').click(function(){
   $eL = $('.grid .object').filter(":visible");
  // $(".grid").find(".object").hide().next().show();
    if($eL.next().length>0){
              $eL.next().show();
          }else{
               $('.grid .object')[0].show();
          }
});

Voici le violon pour que- violon

InformationsquelleAutor Suraj

Vous devez vous connecter pour publier un commentaire.