jQuery afficher/masquer pour faire défiler les tableaux

J'ai besoin de configurer jquery pour faire défiler les tableaux, en vérifiant qu'il affiche/cache le bon.jQuery afficher/masquer pour faire défiler les tableaux

La structure HTML de base est la suivante:

<p><a href="#" class="month-next">Next Month</a></p> 

<table class="month-show"><tr><td>blurb</td></tr></table> 
<table class="month-hide"><tr><td>blurb</td></tr></table> 
<table class="month-hide"><tr><td>blurb</td></tr></table> 
<table class="month-hide"><tr><td>blurb</td></tr></table>

etc

Ainsi, dans jQuery jusqu'à présent j'ai:

$(".month-next").click(function() { 
$("table.month-show").hide(); 
HERE I NEED SOME CODE TO ONLY SHOW THE NEXT TABLE IN THE HTML .show(); 
return false; 
});

Source

2010-02-25 Adi

$(".month-next").click(function() { 
$("table.month-show").hide().next().show(); 
return false; 
});

vous pouvez également modifier les classes, donc que l'appel suivant fonctionnera également (éditer: inséré des changements sugg suggère ested par Mark Schultheiss):

$(".month-next").click(function() { 
    $("table.month-show") 
     .hide() 
     .removeClass("month-show") 
     .addClass("month-hide") 
     .next() 
     .show() 
     .removeClass("month-hide") 
     .addClass("month-show"); 
    if ($("table").hasClass('month-show').length < 1) { 
     $('table').eq(0).addClass('month-show'); 
    } 
return false; 
});

Source

2010-02-25 12:57:02 harpax

Ok, bien mieux que ma réponse. Bien plus fluide. Cependant, ne prend pas soin de revenir au premier élément lorsque le dernier est visible: P – Jamiec

a probablement besoin d'une vérification à la fin avant le retour: if ($ ("table"). HasClass ('month-show') .length <1) $ ('table'). eq (0) .addClass ('mois-show'); –

@Jamiec .. et donc pas mieux que votre réponse :) – harpax

Ici vous allez. Cela devrait fonctionner (et prend même soin de faire du vélo). Vous devrez peut-être faire quelques légers ajustements en raison d'autres balisages sur votre page.

<html> 
<head> 
<script language="javascript" src="jquery-1.3.2.js"></script> 

<script language="javascript"> 
$(document).ready(function(){ 

    $(".month-next").click(function() { 
    var $monthShow = $("table.month-show"); 
    var $monthNext = $monthShow.next('table.month-hide'); 
    if($monthNext.length == 0){ 
     $monthNext = $('table.month-hide:first'); 
     } 
    $monthShow.removeClass('month-show').addClass('month-hide'); 
    $monthNext.removeClass('month-hide').addClass('month-show'); 
    return false; 
    }); 

}); 
</script> 
<style type="text/css"> 
.month-show{ display:block;} 
.month-hide{ display:none;} 

</style> 
</head> 
<body> 

<p><a href="#" class="month-next">Next Month</a></p> 

<table class="month-show"><tr><td>blurb1</td></tr></table> 
<table class="month-hide"><tr><td>blurb2</td></tr></table> 
<table class="month-hide"><tr><td>blurb3</td></tr></table> 
<table class="month-hide"><tr><td>blurb4</td></tr></table> 

</body> 
</html>

Source

2010-02-25 13:05:32 Jamiec

Vous pouvez essayer ceci:

<script type="text/javascript"> 
    $(function() { 
     $(".month-hide").hide(); 
     $(".month-next").click(function() { 
      $(".month-show+table").addClass("month-show").removeClass("month-hide").show(); 
      $(".month-show").filter(":first").removeClass("month-show").hide(); 
     }); 
    }); 
</script>

Source

2010-02-25 13:09:17 vintem

Ceci est un exemple de travail de la façon dont je le ferais cela: http://jsbin.com/ogika

CSS:

.month.hide { display: none; }

HTML

<p><a href="#" class="month-next">Next Month</a></p> 

<table class="month"><tr><td>a</td></tr></table> 
<table class="month hide"><tr><td>b</td></tr></table> 
<table class="month hide"><tr><td>c</td></tr></table> 
<table class="month hide"><tr><td>d</td></tr></table>

JavaScript:

$(function() { 
    $(".month-next").click(function() { 
     var months = $(".month"), numMonths = months.length, curr = 0; 
     return function() { 
      //Hide the current table, by adding the 'hide' class 
      months.eq(curr).addClass("hide"); 

      //Get the index of next table in the list 
      curr = (curr + 1) % numMonths; 

      //Show the next table, by removing the 'hide' class 
      months.eq(curr).removeClass("hide"); 
     } 
    }()); 
});

Dans le code ci-dessus, months est la liste des tables ... dans ce cas, détient 4 éléments; et numMonths est le nombre d'éléments ... à savoir, 4.

La « magie » du code ci-dessus est cette ligne: curr = (curr + 1) % numMonths;

Cette ligne obtient l'indice de l'élément suivant à afficher, et fonctionne de manière circulaire.

Prenons un exemple:

0  1  2  3 
========================= 
| a | b | c | d | 
=========================

Maintenant, disons que curr est 0:

0  1  2  3 
========================= 
| a | b | c | d | 
========================= 
^

//curr is currently 0 
curr = (curr + 1) % numMonths; //(0 + 1) % 4 
//now, curr is 1 

    0  1  2  3 
========================= 
| a | b | c | d | 
========================= 
     ^

Après cette ligne de code est exécuté, curr devient 1: (0 + 1)% 4 = 1. Cela signifie que l'index suivant de l'élément à afficher est 1.Par conséquent, nous obtenons l'élément suivant et montrer, en supprimant la classe hide: months.eq(curr).removeClass("hide");

Maintenant, regardons l'exemple où curr est le dernier élément: 3

0  1  2  3 
========================= 
| a | b | c | d | 
========================= 
        ^

//curr is currently 3 
curr = (curr + 1) % numMonths; //(3 + 1) % 4 
//now, curr is 0 

    0  1  2  3 
========================= 
| a | b | c | d | 
========================= 
^

Comme vous pouvez le voir, curr est maintenant 0 ... et ainsi le cycle continue.

Source

2010-02-25 15:00:41

jQuery afficher/masquer pour faire défiler les tableaux

Répondre

Questions connexes