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

Posted 2023-02-21

【中文标题】.show() 和 .hide() 如何在 jquery 中工作 [重复]

【英文标题】：How .show() and .hide() work in jquery [duplicate]

【发布时间】：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();

【参考方案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 被执行。

希望对你有帮助！