2012-09-13 3 views
1

Ayant pour contrôler la visibilité d'un certain nombre d'éléments DOM sur la base d'un certain nombre de contrôles logiques - Je voudrais vraiment quelque chose comme ça dans jquery:Afficher/masquer plusieurs éléments

$('.FirstPanel').visible = (condition == 1 || othercondition == true); 
$('.SecondPanel').visible = (condition > 3 || othercondition == false); 
$('.ThirdPanel').visible = (condition < 3 || stillanothercondition = 'asdf'); 
etc 

Bien sûr, je peux exprimer la code ci-dessus en utilisant si ou passer des instructions et en appelant $('.FirstPanel').hide() ... mais il faudrait plusieurs fois le nombre de lignes de code.

if(condition == 1 || othercondition == true) { 
    $('.FirstPanel').show(); 
    $('.SecondPanel').hide(); 
    $('.ThirdPanel').hide(); 
} else if (condition > 3 || othercondition == false) { 
    $('.FirstPanel').hide(); 
    $('.SecondPanel').show(); 
    $('.ThirdPanel').hide(); 
} etc 

Je sens qu'il me manque quelque chose d'évident. Merci


2012.09.24 Mise à jour

Merci pour les réponses tout le monde - la méthode à bascule est le ticket (voir la réponse de Michaël Witrant acceptée ci-dessous)

Répondre

3
$('.FirstPanel').toggle(condition == 1 || othercondition == true); 
$('.SecondPanel').toggle(condition > 3 || othercondition == false); 
$('.ThirdPanel').toggle(condition < 3 || stillanothercondition = 'asdf'); 

0

Essayez quelque chose comme:

$(".element").css("display", function() { value = (condition == 1 || othercondition == true); if (value) { return 'block'; /*or 'inline' or 'inline-block'*/ } 
return 'none'; });