return 元素到 display:none 的优雅方式？

Question

我有一个下拉列表，以及默认为 display:none 和 css 的元素列表。 目前，当从下拉列表中选择一个元素时，它会更改为 display:block

我缺少的是如何在选择新元素后将元素 back 更改为 display:none。我知道我可以编写一个循环来不断检查每个元素并将其更改为 display:none 但这看起来很麻烦。 我真正的问题有大约 100 个元素，当其中 99 个元素已经被隐藏时，重新隐藏所有元素似乎很浪费。

想知道在 jQuery（或 javascript）中最优雅的方法是什么。我所拥有的 fiddle 在这里：

https://jsfiddle.net/3w66k51z/4/

谢谢！

Answer 1

创建您的元素数组，然后创建一个函数来隐藏所有元素，但不隐藏您想要显示的元素。

Answer 2

我在您的 .show() 调用之前添加了 $(".sReport").hide(); 以隐藏所有元素。

jQuery.hide() will set the element's display to none

jsfiddle

Answer 3

您可以添加状态以便了解当前显示的项目（如果有）并仅隐藏该元素。我了解到您不想隐藏 所有 项，因为大多数项已经被隐藏了。

Here is a simple implementation of this idea.

（我想你真正的问题涉及的隐藏项比 fiddle 多得多。如果不是——也许即使是——这可能是过早的优化，调用 .hide() 没有错或所有项目上的任何内容。）