web-dev-qa-db-ja.com

可視性を確認するjQuery ifステートメント

他の要素の可視性に応じてdivを非表示/表示するスクリプトを作成しようとしています。他の要素をクリックすると、アクションが発生するはずです。ここに私がこれまで書いたものがあります：

$('#column-left form').hide();
    $('.show-search').click(function() {
        $('#column-left form').stop(true, true).slideToggle(300);
        if( $('#column-left form').css('display') == 'none' ) {
            $("#offers").show();
        } else {
            $('#offers').hide();
        }
    });

Divは非表示になりますが、フォームを非表示にしても元に戻りません。どんな助けにも素晴らしいでしょう:)

編集：

わかりました、私はこれを書くことによって望ましい効果を達成することができました：

$('#column-left form').hide();
    $('.show-search').click(function() {
        if ($('#column-left form').is(":hidden")) {
            $('#column-left form').slideToggle(300);
            $('#offers').hide();
        } else {
            $('#column-left form').slideToggle(300);
            $("#offers").show();
        }
    });

正しく書かれているかどうかはわかりませんが、動作します;）皆に助けてくれてありがとう！

jqueryif-statementhideshowvisible
46
Tomarz

.is(':visible')を使用して何かが表示されているかどうかをテストし、.is(':hidden')を使用して反対のものをテストできます。

$('#offers').toggle(!$('#column-left form').is(':visible')); // or:
$('#offers').toggle($('#column-left form').is(':hidden'));

参照：

121
ThiefMaster

はい、jqueryで.is(':visible')を使用できます。ただし、コードがサファリブラウザーで実行されている間は、.is(':visible')は機能しません。

以下のコードを使用してください

if( $(".example").offset().top > 0 )

上記の行は、IEとsafariの両方で機能します。

4
Baskar Madasamy

試してみる

if ($('#column-left form:visible').length > 0) { ...
2
kontur
 $('#column-left form').hide();
 $('.show-search').click(function() {
    $('#column-left form').stop(true, true).slideToggle(300); //this will slide but not hide that's why
    $('#column-left form').hide(); 
    if(!($('#column-left form').is(":visible"))) {
        $("#offers").show();
    } else {
        $('#offers').hide();
    }
  });
1
pravin

見える場合。

$("#Element").is(':visible');

隠されている場合。

$("#Element").is(':hidden');
0
Nalan Madheswaran

.is（ "：visible"）の使用に関連するパフォーマンスの問題を修正した後、上記の回答に反対することをお勧めします。代わりに、jQueryのコードを使用して単一の要素が表示されるかどうかを決定します。

$.expr.filters.visible($("#singleElementID")[0]);

.isは、要素のセットが別の要素のセット内にあるかどうかを確認します。そのため、ページに表示される要素のセット全体から要素を探します。 100個の要素を持つのはごく普通のことで、表示される要素の配列を検索するのに数ミリ秒かかる場合があります。 Webアプリを構築している場合、おそらく数百または数千を持っています。ある要素が他の5000個の要素の配列に含まれているかどうかを確認していたため、アプリは$（ "＃selector"）。is（ "：visible"）に100msかかっていた。

0
markdon