如何简化用于初始化的 jQuery 代码

How can the jQuery code for initialization be simplified?

本文关键字：jQuery 代码 初始化 何简化 用于      更新时间：2023-09-26

起初，在页面加载时，我抑制了一些元素的可见性。根据单击的函数，将显示每个元素。我的目标是在页面加载时简化以下代码。知道吗？

$("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");
将

类添加到需要隐藏的元素中 

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

并将它们隐藏在 DOM 就绪上

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

或者只使用 CSS

.hide{display:none;}

我认为这种方法更干净，因为稍后更改类名或添加替换它们不会弄乱您的功能。

jQuery

请注意，您可以在查询中使用多个选择器，用逗号分隔。

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

.CSS

您还可以简单地使用 CSS 隐藏元素。

.user-name, .password, .urlcontent, .email, #About, #Careers {
    display: none;
}

我有一个"隐藏"类，它在 CSS 中display: none;，我将其应用于应该隐藏且仅动态显示的所有内容：

.hidden {
  display: none;
}

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

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

所以我只需要在我想展示它的时候做一些事情：

$("span.password").show();

或

$("span.password").removeClass("hidden");

另外，您无需执行[class=password]。只需为类使用正确的jQuery/Sizzle选择器：

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

等。

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

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

或者你可以使用 .hide（） 隐藏所有这些 

$('span,#About,#Careers').hide();
相关文章：