单击时切换输入可见性

Question

我有两个按钮和两个输入字段，输入字段是隐藏的，我想要做的是在点击时切换显示属性，但它只能工作一次，我有一个关闭按钮旁边每个输入这个关闭按钮应该点击后删除每个输入，这是我的代码：

$(function() {
       $('.btn1').click(function() {
         $('.input1').css('display','block');
       });
   });

   $(function() {
          $('.btn2').click(function() {
            $('.input2').css('display','block');
          });
      });
      
   $(".closebutton").click(function () {
             $("input").remove('.removediv');
           });      

.input1, .input2{
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn1">Button1</button>
<button type="button" class="btn btn-default close">Close button</button>
<input type="text" class="form-control input1 removediv">Input 1
<br>
<button type="button" class="btn btn-default btn2">Button2</button> 
<button type="button" class="btn btn-default close">Close button</button>
<input type="text" class="form-control input2 removediv">Input 2

Answer 1

试试这个方法的

1. 更改toggle()而不是css('display')属性
2. .closebutton错误的选择器尝试.close并隐藏next()输入，而不是全部$('input')。使用hide()代替remove()

$(function() {
  $('.btn1').click(function() {
    $('.input1').toggle()
  });
});

$(function() {
  $('.btn2').click(function() {
    $('.input2').toggle()
  });
});

$(".close").click(function() {
  $(this).next("input").hide();
});

.input1,
.input2 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn1">Button1</button>
<button type="button" class="btn btn-default close">Close button</button>
<input type="text" class="form-control input1 removediv">Input 1
<br>
<button type="button" class="btn btn-default btn2">Button2</button>
<button type="button" class="btn btn-default close">Close button</button>
<input type="text" class="form-control input2 removediv">Input 2

Answer 2

如果您想在可见和隐藏使用.toggle()之间切换，否则您点击的所有内容都会显示输入

$(function() {
  $('.btn1, .btn2').click(function() {
    $(this).next().toggle();
  });
});

.input1,
.input2 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn1">Button1</button>
<input type="text" class="form-control input1">Input 1
<br>
<button type="button" class="btn btn-default btn2">Button2</button>
<input type="text" class="form-control input2">Input 2

我也减少了你的代码。

Answer 3

只需使用Jquery切换选项：

$(function() {
  $('.btn1').click(function() {
    $('.input1').toggle();
  });
});

$(function() {
  $('.btn2').click(function() {
    $('.input2').toggle();
  });
});

Answer 4

$(function() {
       $('.btn1').click(function() {
         $('.input1').toggle();
       });
   });

   $(function() {
          $('.btn2').click(function() {
            $('.input2').toggle();
          });
      });

.input1, .input2{
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn1">Button1</button>
<input type="text" class="form-control input1">Input 1
<br>
<button type="button" class="btn btn-default btn2">Button2</button> 
<input type="text" class="form-control input2">Input 2

Answer 5

＆＃13;

＆＃13;

$(function() {
       $('.btn1').click(function() {
         $('.input1').toggle();
      
       });
   });

   $(function() {
          $('.btn2').click(function() {
            $('.input2').toggle();
          });
      });

＆＃13;

.input1, .input2{
display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn1">Button1</button>
<input type="text" class="form-control input1">Input 1
<br>
<button type="button" class="btn btn-default btn2">Button2</button> 
<input type="text" class="form-control input2">Input 2

＆＃13;

＆＃13;

＆＃13;