3

さて、私たちは皆、要素（および複数の要素）の外側をクリックしたときに要素（および複数の要素）を非表示にするこの方法を知っています（つまり、要素はフォーカスを失います）：

$('document').on('click', function () { $(element).hide(); });

$(element).on('click', function (e) { e.stopPropagation(); /* ka-chow! */ });

つまり、ドキュメントに到達するクリックイベントは要素を非表示にしますが、要素内のクリックはドキュメントに伝播せず、クリックイベントを発生させません。

それはすべて素晴らしく、よく、間違いなくニュースではありません。

しかし、私は複雑でリッチなUIを持っています。このインターフェースには、この種の動作を必要とする多くの要素があります。そのことについては、各イベントで1つの要素だけを非表示にする必要があると仮定しましょう。非表示にしたい要素を1つ見つけるために、毎回ロット全体をトラバースする必要がありますか？

もしそうなら、それを行うための最も効率的な方法は何ですか？それらすべてに一意のクラス名を付けますか？または、各要素のクラス名/ ID / DOMインスタンスを配列に格納し、毎回ループしますか？それぞれの解決策は、私には他の解決策よりも非効率に聞こえます。

あなたならどうしますか？

4

1 に答える 1

1

推定：

  1. これらの要素は、javascriptによって表示/非表示になります。

  2. ルールは、表示されるのが遅いほど、非表示になるのが早いということです。

次に、それを処理するための配列を維持します。次に例を示します。

var displayedElements = [];

...

// called when you want to display an element
function showUp (ele) {
    // push element into array
    displayedElements.push(ele);
    ...
}

// called when you want to close the last displayed element
function closeOneIfAvailable () {
    var len = displayedElements.length;
    if (len > 0) {
        var idx = len - 1;
        hideIt (displayedElements[idx]);
        displayedElements.splice(idx, 1);
    }
}

// called when you want to hide an element
function hideIt (ele) {
    ...
}
于 2013-01-28T17:50:02.193 に答える