关于javascript：如何检查HTML元素是否隐藏？


How to check if HTML element is/is not hidden?

本问题已经有最佳答案，请猛点这里访问。

我有两个元素(setproject和sethdc)。单击时，它们显示其他表元素。但我希望同时只显示一组表元素。例如，当用户单击"setproject"时，必须隐藏"sethdc"元素。其他方面也一样。我有什么办法可以把它当作船台来做吗？还是有更简单的方法？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(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");
  });
});
相关讨论

你应该使用

1
2
3
4
5
 if($(this).is(':visible')){
     doSomething();
 }else{
     doSomethingElse();
 }

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

使用：可见选择器

1
2
3
4
5
6
7
8
if($('#element').is(':visible'))
{
    //write the code for visible
}
else
{
    // write the invisible code
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(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事件上的对立元素。

相关讨论