2012-09-13 71 views
1

不必管了许多基于一些逻辑检查的DOM元素的可见性 - 我真的想在jQuery的是这样的:显示/隐藏多个元素

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

我当然可以表达上面的代码使用if或switch语句并调用$('.FirstPanel').hide() ...但它会需要很多倍的代码行数。

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

我觉得我失去了一些明显的东西。由于


2012年9月24日更新

感谢您的答案大家 - 切换方法是门票(见下迈克尔Witrant的接受的答案)

回答

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

http://api.jquery.com/toggle/

0

试着这么做:

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