如何检查 HTML 元素是否隐藏？ [复制]

Question

我有两个元素（setProject 和 setHdc）。单击时，它们会显示其他表格元素。但我想让一组表格元素同时出现。例如，当用户单击“setProject”时，必须隐藏“setHdc”元素。否则也一样。有什么办法可以像 if 语句那样做吗？还是有更简单的方法？

<script> 
$(document).ready(function(){
  $("#setProject ").click(function(){
    $("#test1").fadeToggle("fast");
    $("#projectTable1").fadeToggle("fast");
    $("#projectTable2").fadeToggle("fast");
    $("#projectTable3").fadeToggle("fast");
  });
});
$(document).ready(function(){
  $("#setHdc").click(function(){
    $("#hdcTable1").fadeToggle("fast");
    $("#hdcTable2").fadeToggle("fast");
  });
});
</script>

Answer 1

你应该使用

 if($(this).is(':visible')){
     doSomething();
 }else{
     doSomethingElse();
 }

else 部分仅适用于带有display:none 的元素。具有visibility:hidden/opacity:0 的元素将被视为可见

Answer 2

使用:visible 选择器

if($('#element').is(':visible'))
{
    //write the code for visible
}
else
{
    // write the invisible code
}

Answer 3

$(document).ready(function(){
    $("#setProject ").click(function(){
        $("#setHdc").hide();
        $("#test1").fadeToggle("fast");
        $("#projectTable1").fadeToggle("fast");
        $("#projectTable2").fadeToggle("fast");
        $("#projectTable3").fadeToggle("fast");
    });
    $("#setHdc").click(function(){
        $("#setProject").hide();
        $("#hdcTable1").fadeToggle("fast");
        $("#hdcTable2").fadeToggle("fast");
    });
});

只需在每个元素的 .click 事件上隐藏对面元素即可。