Question

当用户点击按钮时，我编写了一个显示2个文本框的功能。但问题是当点击这两个按钮时，会触发表单中另一个按钮的事件。所以我为Hide和Show函数编写了一个鼠标单击事件。但它仍然无法正常工作。当显示按钮点击时，会显示2个文本框，当隐藏点击时，它们会消失。我会把我的编码放在下面。

     <div class="form-group">
            <div class="col-sm-9">
              <input type="text" id="height"/>
                <input type="text" id="width"/>

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


        </div>
    </div>

$("show").click(function(){ #Mouse Click event for show button


  $(document).ready(function(){
     $("#input1").hide();
             $("#input2").hide();
        $("#hide").click(function(){
            $("#input1").hide();
             $("#input2").hide();
        });
        $("#show").click(function(){
            $("#input1").show();
             $("#input2").show();
        });
    });

    });

Answer 1

试试这个

  $(document).ready(function() {
    $("#height, #width").hide();
    $("#hide").click(function() {
      $("#height, #width").hide();
    });
    $("#show").click(function() {
      $("#height, #width").show();
    });
  });

<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">
    <input type="text" id="height" />
    <input type="text" id="width" />

    <button type="button" id="hide">Hide</button>
    <button type="button" id="show">Show</button>


  </div>
</div>

Answer 2

只需在document.ready中调用click函数即可。还使用适当的选择器触发适当元素上的事件

$(document).ready(function() {

  $("#hide").click(function() {
    $("#height ,#width").hide();

  });
  $("#show").click(function() {
    $("#height ,#width").show();

  });


});

<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">
    <input type="text" id="height" />
    <input type="text" id="width" />

    <button id="hide">Hide</button>
    <button id="show">Show</button>


  </div>
</div>

按钮点击JS

2 个答案: