Question

我的页面上有3个隐藏的div，以及一条可见的通用“欢迎”消息。在这些div的左边是一些项目，当点击时，切换它们各自的div（以及其他div）。这一切都按预期工作。

var $jq = jQuery.noConflict(true); 
$jq(function() { 
$jq("#fade1").click(function(){ 
    $jq("#div1").fadeToggle(750); 
    $jq("#div2").fadeOut(1); 
    $jq("#div3").fadeOut(1);
    $jq("#welcomediv").fadeOut(1);
}); 
$jq("#fade2").click(function(){ 
    $jq("#div1").fadeOut(1); 
    $jq("#div3").fadeOut(1); 
    $jq("#div2").fadeToggle(750); 
    $jq("#welcomediv").fadeOut(1);
}); 
$jq("#fade3").click(function(){ 
    $jq("#div1").fadeOut(1); 
    $jq("#div2").fadeOut(1); 
    $jq("#div3").fadeToggle(750);
    $jq("#welcomediv").fadeOut(1);
});
});

然后我尝试添加一个if语句，告诉欢迎消息如果其他任何一个都不可见则显示自己，例如，如果用户单击一个淡入淡出，然后再次单击它以淡出它。目前，行为只会为用户留下空白空间。

        if ($jq("#div1:hidden") && $jq("#div2:hidden") && $jq("#div3:hidden")){
    (function(){
        $jq("#welcomediv").fadeIn(500);
    });
};

我也尝试过直接检查CSS，例如

if ($jq("#div1").css("display", "none") && $jq("#div2").css("display", "none") &&     $jq("#div3").css("display", "none") {
    $jq("#welcomediv").fadeIn(500);
});

或

if ($('div.x').css('height') === 'auto') {
$('.y').removeClass('a');

}

这些似乎都没有奏效。当点击各自的链接时，div仍会淡入淡出，但我的if语句什么都不做。想法？

Answer 1

要检查元素是否不可见，请使用：

if ($jq(selector).is(':hidden') && ... )

您还应该能够使用以下方法检查所有三个是否可见：

if ($jq('#div1:hidden,#div2:hidden,#div3:hidden').length === 3) { ... }

告诉元素根据页面上其他人的状态显示自己？

1 个答案: