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

Posted 2023-02-21

【中文标题】如何检查 HTML 元素是不是隐藏？ [复制]

【英文标题】：How to check if HTML element is/is not hidden? [duplicate]如何检查 HTML 元素是否隐藏？ [复制]

【发布时间】：2014-05-01 21:49:57

【问题描述】：

我有两个元素（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>

【问题讨论】：

我的问题清楚了吗？

@Rajaprabhu Aravindasamy - 我已经有了答案，但是谢谢！

【参考方案1】：

你应该使用

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

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

【参考方案2】：

使用:visible 选择器

if($('#element').is(':visible'))

    //write the code for visible

else

    // write the invisible code

【参考方案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 事件上隐藏对面元素即可。

【讨论】：

这不是一个解决方案，因为它隐藏了我的整个元素，用户不能再选择它了。