.show() 和 .hide() 如何在 jquery 中工作 [重复]答案

【问题标题】：How .show() and .hide() work in jquery [duplicate].show() 和 .hide() 如何在 jquery 中工作 [重复]
【发布时间】：2016-03-10 08:48:14
【问题描述】：

我目前正在注册，我根据注册过程中的位置隐藏和显示不同的输入。目前，我有 4 个输入，我想从隐藏其中的两个开始。我知道在 jquery 中你可以用 .hide() 来做到这一点。但是，当我加载页面时，两个输入出现然后消失。 .show() 和 .hide() 对元素有什么作用？它会改变显示吗？我怎样才能做到这一点，以便在页面加载时元素开始隐藏，然后我可以在需要时调用 .show() ？

我现在拥有的代码如下。我想要的是我不必在 ready 函数中调用.hide() 并且元素开始隐藏。

$(document).ready(function ()
{
//loads elements then hides them
  $("#input3").hide();
  $("#input4").hide();

//some time later when triggers are set and I want to show the inputs
  $("#input3").show();
  $("#input4").show();
}

我想要什么：

$(document).ready(function ()
{
//inputs 3 and 4 are already hidden

//some time later when triggers are set and I want to show the inputs
  $("#input3").show();
  $("#input4").show();
}

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您需要使用 css 隐藏输入字段。

<input type="text" name="input_name" id="input_id" />
#input_id{
display:none;
}

当你需要显示这个输入框时，调用一个js函数就好了

$('#input_id').show()

【讨论】：

【解决方案2】：

创建一个像这样的 CSS。

.hide
{
display : none
}

并为最初要隐藏的 div 使用 hide 类。

【讨论】：

【解决方案3】：

在您的 html 元素中添加无显示

<input type="text" id="input1" style="display: none" />

或使用 css

#input1, #input2 {
  display: none;
}

【讨论】：

搞定了，.show 和 .hide 只是改变显示吗？
是的，它是正确的！请参阅link 了解更多信息

【解决方案4】：

您可以将它们的初始样式display 设置为none。最好避免使用内联样式。

CSS

#input3, #input4 {
  display: none;
}

在您的情况下，您的 jQuery 正在处理此问题。在执行之前，您的 HTML 会被解析，因此您可以看到 inputs，直到您的 JavaScript 被执行。

希望对你有帮助！

【讨论】：