2017-04-06 10 views
0

私はドロップダウンリストと、デフォルトでdisplay:noneのCSSの要素のリストを持っています。 要素がドロップダウンから選択された場合、現在、それは私が欠けている何display:block要素を表示するエレガントな方法:なし?

に変更されます、新しいものが選択されるとdisplay:noneに戻っ要素を変更する方法です。私は常にすべての要素をチェックしてそれをdisplay:noneに変更するループを書くことができますが、それは面倒です。 私の実際の問題は約100要素あり、そのうち99個が既に隠されているときにすべてを再隠すのは無駄に思えます。

jQuery(またはjavascript)でこれを行う最もエレガントな方法は何ですか。私が持っているもののフィドルはここにある:

https://jsfiddle.net/3w66k51z/4/

ありがとう!

+1

あなたのフィドルは機能していますか? – Paul

+0

良い点@Paulは今です! – Acoustic77

答えて

1

あなたが現在表示されている項目(もしあれば)を知っていると、ちょうどその一つの要素を隠すようにするには、状態を追加することができます。 すべてのアイテムのほとんどが既に非表示になっている場合、そのアイテムを非表示にしたくないと思います。

(私はあなたの本当の問題は、フィドルよりも多くの隠されたアイテムを含んで想像していない場合は - 。多分そうだとすれば - これは時期尚早な最適化であってもよく、すべての上.hide()または何を呼び出すと間違って何もありませんアイテム)

+0

アランそれはまさに私の問題です。私の本当の問題には、フィドルよりも約60件も隠されたアイテムがあります。すでに隠されているアイテムをすべて再表示するのは無駄です。また、一度に表示できるアイテムは1つだけです。 – Acoustic77

+0

@ Acoustic77素晴らしい私はあなたのフィドルのフォークにこの変更を加え、私の答えを更新しました。 https://jsfiddle.net/zdobry1r/2/ –

+1

ありがとう!私はこれがより高速であると仮定しますが、現在、私は、ifとifのすべてを隠して調べる相対的な速度について信じられないほど興味があります。私はこの回答に行くつもりですが、私はそれらを比較することができれば報告します! – Acoustic77

0

要素の配列を作成し、表示したい要素以外のすべての要素を非表示にする関数を作成します。

5

すべての要素を非表示にするために、.show()呼び出しの前に$(".sReport").hide();を追加しました。

jQuery.hide() will set the element's display to none

jsfiddle

+1

これはかなり優雅に見える!他の誰かが特に興味深いものがあるかどうかを確認し、回答を受け入れたものとしてマークします。 – Acoustic77

+2

@ Acoustic77あなたはすべての要素を隠すか、ただ一つだけを隠すことの間に何の違いも感じないので、これは最もクリーンな方法です。もっとエレガンスが必要な場合は、フェードトランジション(例:https://jsfiddle.net/c5rcdut5/)を使うことができます。 – kosmos

+0

私はこれがより清潔であることに同意しますが、私の腸はそれがいくらかスピードを犠牲にして来ると私に伝えます。あなたは正しいかもしれませんが、そうではないかもしれません。私は最適化の比較を見たいと思う – Acoustic77

関連する問題