jQuery show()和hide()vs类与display:block / none

时间:2013-11-14 15:30:16

标签: jquery css

出于好奇,这两种技术中哪一种更有效?

我与我的主管进行了讨论,他告诉我应该创建两个带有display的类:block / none并使用jQuery将它们分配给元素,而不是使用jQuery自己的函数show / hide。

我的印象是,show / hide是广泛使用的功能,没有任何问题,并且它们是为了让我们的生活更轻松而不强迫我们分配类。

4 个答案:

答案 0 :(得分:1)

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

比较

$username.hide();

$username.addClass('hidden');

似乎代码更具可读性,因此它更易于维护,因此客户支持它的成本更低......等等。

答案 1 :(得分:0)

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

主要区别在于show()hide()支持开箱即用的jQuery动画。此外,类不添加内联CSS,而show()hide()执行(内联html覆盖初始display值的任何内容)。根据您的使用情况,这可能会也可能不方便。

show()hide()也会缓存初始的display值,因此,如果您hide()一个元素,然后show(),它会记住原始{ {1}}值为(这意味着它更灵活,因为对于具有不同类型的display值的元素,您不需要唯一的可见类)。

答案 2 :(得分:0)

使用这两种技术中的任何一种都没有“无效”。它归结为我相信你的偏好。 jQuery的show / hide方法运行得非常好。有些要考虑的要点

  • 如果你使用show / hide,它是一个纯粹的基于javascript / jquery的解决方案。
  • 如果你使用CSS类来分配USING jquery,这个方法涉及CSS + jquery

尽管如此,我们总是建议尽可能使用CSS解决方案。如果你像你说的那样创建带有display block / none的类,你可以在整个应用程序中使用它们。所以我想最终是由ypur个人选择。

答案 3 :(得分:0)

我认为方法的不同之处在于,通过对课程进行操作,您可以选择隐藏在未来重新设计中的方式。您可能希望有一天交换一个新的CSS,其中隐藏实际穿越并变灰。通过使用类,您可以保持表示和数据的分离。