gpt4 book ai didi

javascript - 隐藏与删除 DOM 元素

转载 作者:可可西里 更新时间:2023-11-01 01:17:39 25 4
gpt4 key购买 nike

<分区>

隐藏与删除

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

隐藏

什么时候隐藏什么最好?。如果单击一个按钮隐藏多个元素,您可以一个一个地隐藏,也可以创建 css 规则来这样做。

选项 1:

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

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

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

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

http://jsfiddle.net/p8mU8/

另一种选择是只隐藏所需的元素(这些元素可能很少或很多):

选项 2:

<script type=”text/javascript”>
$(“#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”>
$("#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 会创建用户临时拖动的选项卡。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com