jQuery隐藏/显示元素

Question

我有2个元素cols3和cols4。如果其中一个被隐藏，则通过单击要显示元素的按钮。 但是，如果两个元素都隐藏了，那么通过单击一个按钮只会显示元素col3。

我试着用下面的代码： 但是如果两者都隐藏了，通过点击按钮都会显示而不是只显示cols3。

任何帮助？

$('#plusexp').click(function() { 
    if ($('.cols3:visible')) { 
     if ($('.cols4:hidden')) { 
      $('.cols4').show(); 
     } 
    } 
    if ($('.cols3:hidden')) { 
     $('.cols3').show(); 
    } 
}); 

Answer 1

试试这个http://jsfiddle.net/jN7bc/

Answer 2

如果要检查东西是否存在，使用.length财产。 .length属性包含与选择器匹配的元素数量。

关注this jsfiddle看到不使用.length，你总是会得到true是否存在某些元素或不能不管。

编辑：

重新考虑这个（你的描述，你的代码，你真的想达到什么）我的观点是，你的代码应该如下所示（请参阅this jsfiddle）后：

$('#plusexp').click(function() { 
    var $cols3 = $('.cols3'); 
    if ($cols3.is(':visible')){ 
     $('.cols4').show(); 
    }; 
    $cols3.show(); 
}); 

的原因是：

• 您展示cols3无论如何，这是因为：

  • 如果两个cols3和cols4是可见的，你看cols3，
  • 如果只显示一个，你看这个元素（如果这是cols3，你看它，但如果这是cols4，则显示cols3点击之前不会改变任何东西），

• cols4显示，只有当cols3是可见的（如果两者都看不见，那么只有cols3所示），

• 最好是缓存元素（在这种情况下，只有一个变量：$cols3）：这里

  $('#plusexp').click(function() { 
      if ($('.cols3').is(':hidden')) { 
       $('.cols3').show(); 
      } else { 
       if ($('.cols4').is(':hidden')) { 
        $('.cols4').show(); 
       } 
      } 
  }); 
  

  例子：，

Answer 3

试此代码

$('#plusexp').click(function() { 
    if ($('.cols4:hidden')) { 
     $('.cols3').show(); 
    } 
    else 
     $('.cols4').show(); 
    }   
}); 

Answer 4

这是一个完美的解决办法：

$('#plusexp').click(function() { 
var f = $('.cols4').is(":hidden") ? "show" : "hide"; 
    if (f == 'hide' || f == 'Hide') { 
     $('.cols3').show(); 
     $('.cols4').hide(); 
    } 
    if (f == 'show' || f == 'Show') { 
     $('.cols4').show(); 
     $('.cols3').hide(); 
    } 
}); 

而且Demo。 这是使用编辑的简单代码：D。