单击 JS 按钮时显示 2 个文本框

Question

我已经实现了一种代码，可以在用户单击按钮时显示一个文本框。当用户单击同一个按钮时，我需要修改该编码以查看 2 个文本框。我将把编码放在下面。谢谢！

  <div class="form-group">
    <div class="col-sm-9">
  <div id="welcomeDiv"  class="answer_list" style="display:none;">  <input type="text" /></div>

  <input type="button" name="answer" value="Customize Size" onclick="showDiv()" />

</div>

function showDiv(){
      $( "#welcomeDiv" ).show( "slow" );
}

Answer 1

试试这个。

 <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
     $("#input1").hide();
             $("#input2").hide();
        $("#hide").click(function(){
            $("#input1").hide();
             $("#input2").hide();
        });
        $("#show").click(function(){
            $("#input1").show();
             $("#input2").show();
        });
    });
    </script>
    </head>
    <body>

    <input type="text" id="input1"/>
    <input type="text" id="input2"/>

    <button id="hide">Hide</button>
    <button id="show">Show</button>

    </body>
    </html>

希望对您有所帮助:)

Answer 2

这与您的代码完全相同，请查看这是 fiddle link 还有代码片段

 <div class="form-group">
    <div class="col-sm-9">
  <div id="welcomeDiv"  class="answer_list">  <input type="text" /></div>
  <input type="button" name="answer" value="Customize Size" />
</div>

这javascript有点不同，但你会明白的

$("input[type='button']").click(function(){
      $("#welcomeDiv").show('slow');
});

我不喜欢在元素中添加样式，所以使用 css.css

#welcomeDiv{
  display:none;
}

$("input[type='button']").click(function(){
      $("#welcomeDiv").show('slow');
});

#welcomeDiv{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <div class="col-sm-9">
  <div id="welcomeDiv"  class="answer_list">  <input type="text" /></div>
  <input type="button" name="answer" value="Customize Size" />

</div>

单击 JS 按钮时显示 2 个文本框

Showing 2 text boxes when button click JS

html

javascript

buttonclick