用于交换元素的 Javascript 与 CSS

Question

我有一个相当冗长(约 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 花费更多的时间。但是，我没有办法对此进行测试，所以我很好奇社区的经验。

Answer 1

而不是定义新的自定义类，或使用 jQuery 的 show 和 hide 方法，我实际上建议第三种选择。

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

_JS:

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

为确保跨浏览器支持它，您需要添加一些 CSS:

_CSS:

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

This also gives you the ability to override how "hidden" elements are styled, which can be useful for debugging.

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

_JS:

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

如果 jQuery 实现了就好了 show和 hide利用[hidden] ，开发人员在使用 show 时需要小心因为它将覆盖 display 的所有样式表声明当它添加 display样式内联。