显示\隐藏html元素-每种方法的优缺点[关闭]

Question

各有什么优缺点？

直接改变元素样式：

$('#element_to_hide').hide(); // when we want to hide
$('#element_to_hide').show(); // when we want to show

添加\删除类：

.hidden {display:none}
$('#element_to_hide').addClass('hidden');// when we want to hide
$('#element_to_hide').removeClass('hidden'); // when we want to show

还有其他方法吗？如果有，它们的优缺点是什么？

Answer 1

jquery 的隐藏和显示功能更好，因为它不只是改变显示。假设您的显示是内联块，如果您希望元素再次可见，则必须对内联块进行硬编码。如果你只使用 hide 和 show 它会变回原来的样子。

如果其他人要处理您的代码，也更容易阅读。

Answer 2

更好的是addClass() 和removeClass()（和toggleClass()）。更好，因为它不会将内联样式放入 DOM，因此您可以在 CSS 中使用此类进行任何您想做的事情。

Answer 3

以下是几种不同的方法以及每种方法的优缺点。

-

使用 addClass()/removeClass() 改变显示

在为此设置示例时，我实际上遇到了这种方法的一些缺陷，使其非常不可靠。

Css/Javascript：

.hidden {display:none}
$("#element_to_hide").addClass("hidden");  // To hide
$("#element_to_hide").removeClass("hidden");  // To unhide

优点：

• 它会隐藏....有时。请参阅示例中的 p1。
• 取消隐藏后，它会返回使用以前的显示值....有时。请参阅示例中的 p1。
• 如果你想抓住所有隐藏的物体，你只需要做$(".hidden")。

缺点：

• 如果直接在 html 上设置显示值，则不会隐藏。请参阅示例中的 p2。
• 如果使用 css() 在 javascript 中设置显示，则不会隐藏。请参阅示例中的 p3。
• 代码稍微多一些，因为您必须定义一个 css 属性。

示例：https://jsfiddle.net/476oha8t/8/

-

使用 toggle() 改变显示

Javascript：

$("element_to_hide").toggle();  // To hide and to unhide

优点：

• 始终有效。
• 让您不必担心切换之前的状态。这样做的明显用途是用于一个....切换按钮。
• 简短而简单。

缺点：

• 如果您需要知道它正在切换到哪个状态以执行不直接相关的操作，则必须添加更多代码（一个 if 语句）来找出它处于哪个状态。
• 与上一个骗局类似，如果你想运行一组包含 toggle() 的指令来进行隐藏，但你不知道它是否已经隐藏，你必须添加一个检查（一个if 语句）首先找出它是否已经隐藏，然后跳过。请参阅示例的 p1。
• 与前面的 2 个缺点相关，使用 toggle() 处理特别隐藏或特别显示的内容，可能会使阅读您的代码的其他人感到困惑，因为他们不知道他们会以哪种方式切换。

示例：https://jsfiddle.net/cxcawkyk/1/

-

使用 hide()/show() 改变显示

Javascript：

$("#element_to_hide").hide();  // To hide
$("#element_to_hide").show();  // To show

优点：

• 始终有效。
• 取消隐藏后，将返回使用之前的显示值。
• 您将始终知道要切换到哪个状态，因此您：
  1. 如果状态很重要，则无需添加 if 语句来检查可见性，然后再更改状态。
  2. 不会让阅读您的代码的其他人混淆您正在切换到哪个状态，如果状态重要的话。
• 直观。

缺点：

• 如果要模拟切换，则必须先检查状态，然后再切换到其他状态。使用 toggle() 代替这些。请参阅示例的 p2。

例如：https://jsfiddle.net/k0ukhmfL/

-

使用 css() 改变显示

这个方法我不推荐使用，但为了完整而添加。

Javascript：

$("#element_to_hide").css("display", "none");  // To hide
$("#element_to_hide").css("display", "");  // To unhide

优点：

• 隐藏和取消隐藏。就是这样。

缺点：

• 如果您将“显示”属性用于其他用途，则必须硬编码隐藏之前的值。因此，如果您有“内联”，则必须执行 $("#element_to_hid").css("display", "inline"); 否则它将默认返回“阻止”或其他强制执行的状态。
• 容易出现拼写错误。

示例：https://jsfiddle.net/4chd6e5r/1/

---

TL;博士。我认为最好的方法是Changing display using hide()/show()，除非您特别需要它作为切换开关。