jQuery show() 和 hide() 与带有 display:block / none 的类答案

【问题标题】：jQuery show() and hide() vs classes with display:block / nonejQuery show() 和 hide() 与带有 display:block / none 的类
【发布时间】：2013-11-15 01:59:42
【问题描述】：

出于好奇，这两种技术中哪一种更“有效”？

我和我的主管讨论过，他告诉我应该使用 display:block/none 创建两个类，并使用 jQuery 将它们分配给元素，而不是使用 jQuery 自己的函数显示/隐藏。

我的印象是，显示/隐藏是广泛使用的功能，可以毫无问题地工作，并且通过不强迫我们分配类来使我们的生活更轻松。

【问题讨论】：

他们工作得很好。这可能与您工作的编码标准有关。
完全一样......当然，如果你使用 jquery，更喜欢显示和隐藏而不是制作类......只有关于显示和隐藏的是内联样式
在此处查看差异：stackoverflow.com/questions/13562439/…
我在结尾的 jquery show/hide 添加了一个带有 display:block/none 的内联样式
虽然这是一个有趣的主题，但它主要是基于意见的，因此恐怕不属于 Stack Overflow。归根结底，在两者之间进行选择既不是更“有效”，也不是更“正确”。这取决于具体情况。

标签： jquery css

【解决方案1】：

您可以使用此类 CSS 类在页面上最初隐藏元素，以便稍后使用 jQuery.show() 显示它。无论如何jQuery.show() 直接设置样式属性，因此浏览器不需要在每次分配时通过 CSS 声明查找类。所以我相信它会工作得更快，也更方便开发人员。顺便说一句，show/hide 的代码也更易读。

比较一下

$username.hide();

到

$username.addClass('hidden');

似乎代码更具可读性，因此更易于维护，因此客户支持它更便宜......等等。

【讨论】：

【解决方案2】：

它们是相同的 - show() 和 hide() 只是在 display: block（或 inline、inline-block 等）和 display: none 或类似名称之间切换。使用这些或使用简单的类在这些样式之间切换都是完全“有效的”。

主要区别在于show() 和hide() 支持开箱即用的jQuery 动画。此外，类不添加内联 CSS，而 show() 和 hide() 会（内联 html 以覆盖初始 display 值）。根据您的用例，这可能会也可能不会方便。

show() 和 hide() 也会缓存初始的 display 值，所以如果你 hide() 一个元素然后 show() 它，它会记住原来的 display 值是什么（这意味着它更灵活因为对于具有不同类型的 display 值的元素，您不需要唯一的可见类。

【讨论】：

【解决方案3】：

使用这两种技术中的任何一种都没有“无效”的地方。我相信这归结为您的偏好。 jQuery 的显示/隐藏方法运行良好。需要考虑的几点

如果您使用显示/隐藏，它是一个纯基于 javascript/jquery 的解决方案。
如果您通过使用 jquery 分配 CSS 类来使用它们，则此方法涉及 CSS + jquery

话虽如此，始终建议尽可能使用 CSS 解决方案。如果您像您说的那样创建带有显示块/无的类，则可以在整个应用程序中使用它们。所以我想这最终取决于你个人的选择。

【讨论】：

【解决方案4】：

我认为这些方法的不同之处在于，通过使用类，您可以选择在未来重新设计时如何隐藏。有一天你可能想换一个新的 CSS，其中隐藏实际上是穿过并变灰的。通过使用类，您可以保持表示和数据的分离。

【讨论】：