Question

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

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

Answer 1

为您需要隐藏的元素添加一个类

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

并将它们隐藏在dom ready

上

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

或只是使用css

.hide{display:none;}

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

Answer 2

我有一个＆＃34;隐藏＆＃34;，它在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")

等

Answer 3

你可以只在一行中合并你的ID和类，并将它们显示为无下一个代码将适用于所有span元素因此，如果要指定跨度，则使用span [[class =＆＃39; user-name＆＃39;]]

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

或者您可以使用.hide（）

隐藏所有这些内容

$('span,#About,#Careers').hide();

Answer 4

<强>的jQuery

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

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

<强> CSS

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

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

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

4 个答案: