点击切换输入可见度

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

$(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