Javascript 如何简化初始化的jQuery代码？

首先，在页面加载时，我抑制了一些元素的可见性。根据单击的函数，将显示每个元素。我的目标是在页面加载时简化下面的代码。有什么想法吗

$("span[class='user-name']").css("display", "none");
$("span[class='password']").css("display", "none");
$("span[class='urlcontent']").css("display", "none");
$("span[class='email']").css("display", "none");
$("#About").css("display", "none");
$("#Careers").css("display", "none");

我有一个类“hidden”，它有

display:none，我将其应用于所有应该隐藏且只能动态显示的内容：

.hidden {
  display: none;
}

然后在我的HTML中添加该类：

<span class="password hidden">...</span>

或

此外，您不需要执行
[class=password]
。只需为类使用适当的jQuery/Sizzle选择器：

$("span.password")
$("span.email")

等等。
您可以将ID和类合并到一行中，然后将它们显示为无
下一个代码将应用于所有span元素，因此如果要指定span，请使用span[[class='user-name']]

 $('span,#About,#Careers').css("display", "none");

或者，您可以使用.hide（）隐藏它们

jQuery

请注意，在查询中可以有多个选择器，它们之间用逗号分隔

$(".user-name,.password,.urlcontent,.email,#About,#Careers").hide();

CSS

您还可以通过简单地使用CSS来隐藏元素

.user name、.password、.urlcontent、.email、#About、#Careers{
显示：无；
}
将类添加到需要隐藏的元素中

<span class="user-name hide"></span>

或者只是使用css

.hide{display:none;}

我认为这种方法更简洁，因为更改类名或添加替换它们不会破坏您的功能
 这个答案是不完整的，看起来OP只想隐藏span元素的一个子集，而不是所有元素。再多一些文字来描述您的代码，这将是一个有效的答案，不客气。你应该总是用至少一句或两句话来解释你的答案，这样人们才能理解背后的原因
$(".user-name,.password,.urlcontent,.email,#About,#Careers").hide();

<span class="user-name hide"></span>

$('.hide').hide();

.hide{display:none;}