1

我有一个相当长（约 100 个字段）的表单，其中包含在“快速”和“完整”引用之间切换的某些元素。这会将 75 个字段从隐藏切换为可见。目前，我通过一些简单的 jQuery 做到这一点：

jQuery('.full_quote').show();
jQuery('.quick_quote').hide();

我意识到这可以使用 CSS 为我完成工作以不同的方式完成：

## Javascript:
  jQuery('#quote_form').toggleClass("full_quote quick_quote");

## CSS:
  form.toggle-form.full_quote .quick_quote {display: none;}
  form.toggle-form.quick_quote .full_quote {display: none;}

所以大部分问题是： 在考虑性能时使用哪个更好？

我最初的想法是，在 jQuery 中迭代结果的开销将比 CSS 花费更多的时间。但是，我没有办法对此进行测试，所以我很好奇社区的经验。

4

2 回答 2

1

与其定义新的自定义类，或者使用 jQueryshow和hide方法，我实际上建议使用第三种选择。

将[hidden]属性添加到需要隐藏的任何元素，并在需要显示时删除该属性：

JS： 
$('.foo').attr('hidden', true);

为确保跨浏览器支持此功能，您需要添加一些 CSS：

CSS： 
[hidden] {
    display: none !important;
    visibility: hidden !important;
}

这也使您能够覆盖“隐藏”元素的样式，这对于调试很有用。

当你想显示元素时，只需删除[hidden]属性：

JS： 
$('.foo').attr('hidden', false);

如果 jQuery 实现show并hide使用[hidden]，那就太好了，相反，开发人员在使用时需要小心，因为它会在添加样式内联时show覆盖任何样式表声明。displaydisplay

于 2013-01-10T20:41:05.873 回答
0

两者本质上是一样的。JQuery 在内部执行非常相似的相同逻辑。（请参阅jquery 的显示/隐藏功能如何工作？）。它不像你的 CSS apprach 根本不使用 javascript（在这种情况下，这将是更好的选择）

所以，

jQuery('.full_quote').show();
jQuery('.quick_quote').hide();

有道理（无论如何你都在使用 JQuery，为什么不使用它的所有功能）更具可读性，并且

于 2013-01-10T20:26:55.180 回答