Question

我想：当我点击一个按钮以显示div1并且div2隐藏时，当我再次单击它来执行相反操作时，div 2隐藏并显示div1。我设法只实现了第一部分。

Jquery的：

<script type="text/javascript">
  $(document).ready(function() {
    $("#insert").on('click', function() {
      $(".subtable").hide();
      $(".insert-field").show();
    });
  });
</script>

HTML

<input type="button" name="insert" id="insert" value="Insert Subscriber(s)">
    <table class="subtable">...</table>
    <div class="insert-field">...</div>

我错过了什么？

Answer 1

您可以使用toggle()更改元素的显示。如果它被隐藏，它将被显示。如果显示，将被隐藏。这是最简单的来回翻转方式。

另一种方法是检查元素是否被隐藏，或者在一个单独的变量中跟踪状态，您可以参考该变量来知道是隐藏还是显示。

Answer 2

使用jQuery.toggle()。根据您的实现，您可以根据另一个元素的.toggle()属性将.visible的参数设置为true或false。

Answer 3

$("button").click(function(){
   $("p").toggle();
});

这是一个帮助您的快速教程。

W3SCHOOLS

Answer 4

$(document).ready(function(){
  var flag = true;
  $("#button").on('click',function(){
      if(flag == true){
        $("#div1").show();
        $("#div2").hide();
        flag =false;
       }else{
          $("#div1").hide();
          $("#div2").show();
          flag =true;
         }
   });

单击时显示div并隐藏另一个div和对面

4 个答案: