[解決済み] jQueryで要素が表示されているかどうかを検出する [重複]。

質問

使用方法 .fadeIn() と .fadeOut() 私は、ページ上の要素を隠したり見せたりしていますが、2つのボタン、1つは隠すためのボタン、もう1つは見せるためのボタンを使っています。今、私は 一つ ボタンでトグル 両方 .

私のHTML / JavaScriptをそのまま。

<a onclick="showTestElement()">Show</a>
<a onclick="hideTestElement()">Hide</a>

function showTestElement() {
  $('#testElement').fadeIn('fast');
}

function hideTestElement() {
  $('#testElement').fadeOut('fast');
}

私のHTML/JavaScriptはこうありたいと思います。

<a onclick="toggleTestElement()">Show/Hide</a>

function toggleTestElement() {
  if (document.getElementById('testElement').***IS_VISIBLE***) {
    $('#testElement').fadeOut('fast');
  } else {
    $('#testElement').fadeIn('fast');
  }
}

要素が表示されているかどうかは、どのように検出するのですか？

どのように解決するのですか？

探しているのは

.is(':visible')

ただし、他の場所でjQueryを使用していることを考えると、セレクタを変更したほうがいいでしょう。

if($('#testElement').is(':visible')) {
    // Code
}

ここで重要なのは、ターゲット要素の親要素のうち1つでもhiddenになっていれば .is(':visible') を返します。 false (これは理にかなっている)。

jQuery 3

:visible は、多くの要素を検査するために DOM ツリーを横断しなければならないので、非常に遅いセレクタであるという評判がありました。しかし、jQuery 3には良いニュースがあります。 この記事 が説明しています( Ctrl + F について :visible ):

GoogleのPaul Irishによる検出作業のおかげで、:visibleのようなカスタムセレクタが同じドキュメントで何度も使用される場合に、余分な作業を省略できるケースがいくつかあることがわかりました。このケースでは、最大で17倍高速化されました。

このように改善されても、:visible や :hidden などのセレクタは、要素が実際にページ上に表示されているかどうかをブラウザに依存するため、コストが高くなる可能性があることに留意してください。そのため、最悪の場合、CSSスタイルとページレイアウトの完全な再計算が必要になる可能性があります。ほとんどの場合、これらのセレクタの使用をお勧めしませんが、これらのセレクタがパフォーマンスの問題を引き起こしているかどうかを判断するために、ページをテストすることをお勧めします。

さらに具体的なユースケースに展開すると、jQueryの組み込み関数で $.fadeToggle() :

function toggleTestElement() {
    $('#testElement').fadeToggle('fast');
}