☰

jQueryで要素が表示されているかどうかを検出する [重複] 質問する

tag-icon • tag-icon javascript jquery
jQueryで要素が表示されているかどうかを検出する [重複] 質問する

.fadeIn()と を使用して.fadeOut()、ページ上の要素を非表示/表示していますが、ボタンが 2 つあり、1 つは非表示、もう 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');
  }
}

要素が表示されているかどうかをどのように検出しますか?

ベストアンサー1

あなたが探しています：

.is(':visible')

ただし、いずれにしても他の場所でも jQuery を使用していることを考慮すると、セレクターを変更して jQuery を使用するようにしたほうがよいでしょう。

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

ターゲット要素の親要素のいずれかが非表示になっている場合は、.is(':visible')子要素が返されることに注意してくださいfalse(これは理にかなっています)。

jQuery 3

:visiblejQueryはDOMツリーを辿って多数の要素を調べる必要があるため、かなり遅いセレクターという評判がありました。しかし、jQuery 3には良いニュースがあります。この郵便受け（Ctrl+Fは:visible）を説明します:

Google の Paul Irish による調査のおかげで、:visible などのカスタム セレクターが同じドキュメント内で何度も使用される場合に、余分な作業を大幅に省略できるケースがいくつか特定されました。この特定のケースでは、現在、最大 17 倍高速化されています。

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

特定のユースケースにさらに拡張すると、組み込みのjQuery関数があります。$.fadeToggle():

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

おすすめ記事