ページに表示されているすべての要素を非表示にするjQueryスクリプトを作成しようとしています。
次に、誰かがボタンを押した後、非表示になっているすべての要素を再び表示します。
私は.is(':visible')、すべての仕切りでセレクターを使用し、表示されているものを保存してから.hide();、それらすべてで使用できることを知っています。.show();最後に、誰かが私のボタンをクリックしたときに、それらを再び使用できることを私は知っています。
しかし、私はこれを行うためのより良い方法があるかどうか疑問に思いました。
1回のスイープですべての要素を非表示にすることは大きな問題ではないと思います（おそらくそれ$(document).hide()を行うようなものですか？）
しかし、最も重要なのは、非表示にされたすべての要素を適切な方法で保存して、それらを再び復元できるようにするにはどうすればよいでしょうか。
要素を非表示にする前に、後でそれらを識別できるように、すべての要素にクラスを適用します。
// hide everything visible, except the button clicked
$('button#hideVisible').click(function() {
$(':visible').each(function() {
$(this).addClass("unhideable");
$(this).hide();
});
$(this).show();
});
eachまたは、この特定のケースでは、jQueryを実際に使用する必要はありません。:visibleセレクターとセレクターではなくjQuerythisを組み合わせて、次の値を使用してボタンを除外することにより、jQuery関数を簡略化できます。
// much simpler version of applying an unhideable class and hiding visible elements
$('button#hideVisible').click(function() {
$(':visible').not(this).addClass("unhideable");
$(':visible').not(this).hide();
});
アップデート：
ただし、上記の2つのソリューションは、自動スクリプトの場合のように、要素を再表示するためにユーザーの介入を必要としないシナリオには最適ですが、上記の2つの例の問題は、ボタンの親要素を非表示にすることです。明示的ではないにもかかわらず、ボタンが非表示になることを意味します。要素を再表示するためにユーザーがボタンをもう一度クリックする必要がある場合、上記の2つの解決策は制限されます。
したがって、この関数の次の進化は、 jQueryのparentsUntilメソッドを使用して親を確実に除外することです。
$('button#hideVisible').click(function() {
// if we're in the hide state, unhide elements and return
if( $('button').hasClass('ancestors') == true ) {
$(this).html("Hide");
$('.unhideable').show();
$('.unhideable, .ancestors').removeClass("unhideable").removeClass("ancestors");
return;
}
// hide all children of the button. While this might not make sense for a button
// it's helpful to use this on clickable DIV's that may have descendants!
$('#hideVisible').find(':visible').addClass("unhideable");
$('#hideVisible').find(':visible').hide();
// put a class on button ancestors so we can exclude them from the hide actions
$('#hideVisible').parentsUntil("html").addClass("ancestors");
$('html').parentsUntil("html").addClass("ancestors");
// let's not forget to include the button as well
$(this).addClass("ancestors");
// make sure all other elements on the page that are not ancestors and
// not descendants of button end up marked as unhideable too!
$(':visible').not('.ancestors').addClass("unhideable");
// nice debug output to give you an idea of what's going on under the hood
// when the hide operation is finally called
$(':visible').not('.ancestors, html').each(function() {
console.info($(this).get());
});
// hide the remaining elements on the page that aren't ancestors,
// and include the html element in the exception list as for some reason,
// we can't add class attributes to it
$(':visible').not('.ancestors, html').hide();
// change the button text to "Show"
$(this).html("Show");
});
非表示にできないすべての要素を再表示する：
次に、それらを再表示する場合は、次のように呼び出します。
$('.unhideable').show();
最後に、必要に応じて、次の電話番号を呼び出して、自分の後でクリーンアップできます。
$('.unhideable, .ancestors').removeClass("unhideable").removeClass("ancestors");
デモ：
この機能のデモンストレーションについては、このjsfiddleを参照してください。
これを試して：
$('div:visible').hide();
$('div:hidden').show();