Question

我有一个

<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();

Answer 1

我说隐藏＆amp;显示div。

它不那么密集，如果javascript变量中的内容恰好包含你要绑定的元素，那么每次刷新内容时都不会重新绑定，如果你想要在不同的内容之间有某种动画，多个div也允许。

作为旁注，使用jQuery可以减少执行

等操作的代码

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

Answer 2

这两者并非完全可比，因为它们做了不同的事情。他们可能会给出类似的看法，但在标记方面发生的事情并不相同。事实上，将.html('Something').show()链接在一起并不罕见。

将字符串传递给.html()取代所选元素的内容，它不会影响元素本身。
仅调用.show()或.hide() 会影响元素本身 - 所有后代都保持完全相同，因为他们的父母不是，所以他们无法看到正在展示。

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

.hide()和.show()正是他们所说的。您的元素中的数据仍然保留，事件处理程序仍然存在，它们都只是隐藏了＆＃39;通过display: none。

如果内容动态更改，没有网页加载，请使用.html()，否则，.show()和.hide()更合适。

Answer 3

为了易于使用和更简洁更清晰的代码，通过HTML设置内容是正确的选择！

将其视为您尝试做的事情，1 DIV =＆gt;可以包含3个不同的内容，您可以通过JS操作它。

所以，在你的第一个解决方案中，你实际上有一个div并通过JS操作它：

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

然而，在第二个解决方案中，您实际上使用4个div来实现相同的功能！所以当然，如果你可以用1 div做点什么。这是首选方式。

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

Answer 4

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

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

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

Answer 5

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

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

jQuery hide（），show（）或html（）

5 个答案: