jQuery hide(), show() or html()

jQuery hide(), show() or html()

本文关键字：or html show jQuery hide      更新时间：2023-09-26

我有一个

<div id="content">
</div>

以及存储不同html的三个js变量：content1、content2和content3。

通过用户交互，上述div的内容将更改为存储在js变量中的内容。

通过用户交互直接将div内容设置为我需要的内容更可取：

$("#content").html(content2);

或将div结构更改为：

<div id="content">
    <div id="c1">
        // value of content1 variable here
    </div>
    <div id="c2">
        // value of content2 variable here
    </div>
    <div id="c3">
        // value of content3 variable here
    </div>
</div>

对内部块执行hide()和show()，即当我希望显示content2时：

$("#c1").hide();
$("#c2").show();
$("#c3").hide();

我会说隐藏&显示div。

它的密集度较低，如果javascript变量中的内容恰好包含要绑定的元素，则不必每次刷新内容时都重新绑定，如果您希望在不同的内容之间有某种动画，多个div也允许这样做。

附带说明一下，使用jQuery可以减少像这样的代码

$("#c2").show().siblings().hide();

这两者并没有真正的可比性，因为它们做的事情不同。他们可能会给出类似的看法，但在标记方面发生的事情并不相同。事实上，.html('Something').show()链接在一起的情况并不少见。

  • 将字符串传递给.html()将替换所选元素的内容，这不会影响元素本身
  • 仅调用.show()或.hide()会影响元素本身-所有子体都保持完全相同，只是看不到它们，因为它们的父体没有显示

通过使用.html()，您可以替换元素中的所有内容。对这些降序元素的所有引用都将变成未定义的，并且直接（非委派）事件侦听器也将丢失。

CCD_ 13和CCD_。元素中的数据仍然保留，事件处理程序仍然存在，所有这些都只是通过display: none"隐藏"的。

如果内容动态变化，而不加载页面，则使用.html()；否则，.show()和.hide()更合适。

为了易于使用和更短、更干净的代码，通过HTML设置内容是正确的选择！

把它想象成你正在尝试做的事情，1 DIV=>可以包含3个不同的内容，你可以通过JS操作它。

因此，在您的第一个解决方案中，您实际上有一个div，并通过JS:对其进行操作

$("#content").html(content1);
$("#content").html(content2);
$("#content").html(content3);

然而，在第二个解决方案中，您实际上使用了4个div来实现相同的功能！当然，如果你能用1div.做某事，那是首选的方法。

它们对JS都采用了相同的行数，但使用第二种方法，考虑到内容很大，HTML将包含更多的代码。

我认为最好的解决方案是将不同的内容存储到三个变量中，然后用将选定的内容分配给div

$("#content").html(content2);

通过这种方式，DOM树上的节点减少了三个

这两个选项之间没有太大区别。可能影响这一点的一个因素是您正在更改的内容的实际大小。如果内容相对较小，那么你选择哪种方式其实并不重要。

另一件需要考虑的事情是内容变量的三个版本的可用性。如果每次加载时都必须获取HTML内容，那么在向用户显示内容之前预先填充内容可能是有意义的，这样可以节省加载时间。然后只需显示/隐藏适当的内容。

相关文章：