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样式内联。

Answer 2

两者基本相同。 JQuery在内部执行非常相似的逻辑。（见How does jquery's show/hide function work?）。并且它不像你的CSS apprach根本不使用javascript（在这种情况下，它将是更好的选择）

所以，

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

有意义（无论如何你使用JQuery，为什么不使用它的所有功能）更具可读性

用于交换元素的Javascript与CSS

2 个答案: