jQuery隐藏和显示文本输入 [英] jQuery hide and show text input

问题描述

我想在Jquery中做一个简单的功能:单击按钮时显示输入文本，再次单击时隐藏输入文本.

I want to do a simple function in Jquery: when a button is clicked show the input text, when it's clicked again- hide the input text.

<div>
  <div id="btnNewGroup">New Group</div>
  <input type="text" id="newGroup" style="display:none" />
</div>

这是易碎部分:

$(document).ready(function () {
  $("#btnNewGroup").click(function () {
     if ($("#newGroup").hide()) {
           $("#newGroup").show();
     }

     else {
           $("#newGroup").hide()
     }
  });
});

当我单击按钮时，将显示文本输入，再次单击时，我希望隐藏输入文本，但是什么也没发生.

when I click the button the text input is showing, when I click it again I want the input text to be hidden, but nothing happens.

推荐答案

您可以使用 toggle()显示/隐藏

实时演示

Live Demo

$("#btnNewGroup").click(function () {        
     $("#newGroup").toggle();        
});

您所拥有的条件存在的问题是您正在隐藏元素，而不是检查元素是否被隐藏.您可以将is与:hidden一起使用，例如is(':hidden')，以检查元素是否隐藏.

The problem with the condition you have is that you are hiding the element instead of checking if it is hidden. You can is with :hidden like is(':hidden') to check if element is hidden.

if ($("#newGroup").is(':hidden')) {
     $("#newGroup").show();
else  
     $("#newGroup").hide();

这篇关于jQuery隐藏和显示文本输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！