19

非表示と削除

DOM 要素、非表示または削除を処理する最良の方法は何ですか? 環境が数回変わる可能性があると仮定します。要素には、クリック コールバックまたはその他のイベント コールバックを含めることができます。

隠れる

何がベストかを隠すとき。ボタンをクリックして複数の項目を非表示にする場合は、1 つずつ非表示にするか、そのための CSS ルールを作成することもできます。

オプション1：

<style>
.superContent{/*...*/}

.superContent.noEdit .occultable{
    display:none;
}
</style>

<form class=”superContent” action=”...”&gt;
    <label>Name</label>
    <input type=”text” />
    <input type=”submit” class=”occultable” value=”send”/>
</form>

<button id=”hideAll”&gt;Edit</button>
<script type=”text/javascript”&gt;
    $(“#hideAll”).click(function(){
        $(“.superContent”).toggleClass(“noEdit”);
    });
</script>

http://jsfiddle.net/p8mU8/

もう 1 つのオプションは、目的のアイテムを非表示にすることです (これらは少数または多数の場合があります)。

オプション 2:

<script type=”text/javascript”&gt;
    $(“#hideAll”).click(function(){
        $(“.occultable”).toggle();
    });
</script>

http://jsfiddle.net/JAmF9/

削除する

DOM を変更するには、不要なアイテムを削除して後で再挿入することもできます。

オプション 3:

<form class="superContent">
    <label>Name</label>
    <input type="text" />
    <input id="sendbutton" type="submit" class="occultable" value="send"/>
</form>

<button id="hideAll">Edit</button>​

<script type=”text/javascript”&gt;
$("#hideAll").click(function(){
    if( $(".superContent").find("#sendbutton").length>0 ){
        $(".superContent").find("#sendbutton").remove();
    }
    else{
        $(".superContent").append('<input id="sendbutton" type="submit" class="occultable" value="send"/>');
    }
});​
</script>

http://jsfiddle.net/Yj5Aw/

これらはほんの一例です。多数の要素を含む UI を想定しています。最良の選択肢は何だと思いますか?. メモリリークが少なく、パフォーマンスが高いのはどれですか?

要素を削除する kendo-ui のような JavaScript フレームワークがいくつかあります。jQueryUI はアイテムを非表示にすることを好みますが、ウィジェット Tab sortable は、ユーザーが一時的にドラッグしたタブを作成します。

4

1 に答える 1

23

それはあなたが知っているのは明らかです

  • 要素を再表示したい場合は非表示が最適です。
  • 要素を再度使用する必要がない場合は、削除が最適です。

要素を非表示にしてから再表示しても、特に jQuery が使用されている場合、それらの要素はすべてのコールバックとデータを失うことはありません。

不要な要素を削除すると、ページに割り当てられるメモリが減少しますが、ほとんどのシナリオでは大きな変化にはなりません。

于 2012-12-27T16:41:50.373 に答える