1

ページに 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 ステートメントは何もしません。アイデア？

4

1 に答える 1

0

要素が非表示かどうかを確認するには、次を使用します。

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

次を使用して、3 つすべてが表示されているかどうかを確認することもできます。

if ($jq('#div1:hidden,#div2:hidden,#div3:hidden').length === 3) { ... }
于 2013-03-26T18:54:13.413 に答える