19

隐藏与删除

处理 DOM 元素、隐藏或删除的最佳方法是什么？假设环境可以多次改变。元素可以有点击回调或其他事件回调。

隐藏

什么时候隐藏什么是最好的？如果单击一个按钮隐藏多个项目，您可以一个一个隐藏，也可以创建 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/

另一种选择是只隐藏所需的项目（这些可能很少或很多）：

选项 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 包含大量元素。你认为最好的选择是什么？哪个内存泄漏更少，性能更高？

有一些 javascript 框架，如 kendo-ui，可以删除元素。jQueryUI 更喜欢隐藏项目，但小部件 Tab sortable 会创建用户临时拖动的选项卡。

4

1 回答 1

23

很明显你知道

  • 当您想重新显示元素时，隐藏是最好的。
  • 当您不需要再次使用这些元素时，删除是最好的。

当您隐藏元素然后重新显示它们时，这些元素不会丢失所有的回调和数据，特别是在使用 jQuery 时。

当您删除不必要的元素时，您会减少为您的页面分配的内存，尽管在大多数情况下这不会是一个显着的变化。

于 2012-12-27T16:41:50.373 回答