php - 切换类的jQuery函数存在两次，但仅起作用一次

我有一个index.php页面，无论您激活会话还是注销该页面的内容都会更改。

用户登录后，单击链接“ showhide”将显示类“用户”。
当用户注销时，链接“ showhide”被隐藏，而链接“ showhide2”是可见的，当按下该类时应显示类“ users2”。

我在网上找到了一个jQuery片段，可以完全做到这一点，并且可以很好地用于链接“ showhide”
不幸的是，它对于链接“ showhide2”不起作用-该类始终可见...

这是我的代码：

<div id="content" style="margin-top:10px;height:100%;">
      <?php
      /*echo "Der Nutzername ist ".$_SESSION['user'];
      echo "<br>Die Session lautet ".$_SESSION['sessionname'];
      echo "<br>".session_id();*/


      $sArray = explode(".",$_SESSION['sessionname']);
        $session1 = $sArray[0];
        $session2 = $sArray[1];
      $sessionausblenden = $_SESSION['sessionname'];
      if (!isset($sessionausblenden)){
          echo "<style type='text/css'>
        #showhide{
            visibility:hidden !important;
        }

        .users{
        visibility:hidden !important;
        }

        #logout {
        visibility:hidden !important;
        }
        </style>";


      }
      elseif (isset($sessionausblenden)){
          echo "<style type='text/css'>
        #showhide2{
            visibility:hidden !important;
        }

        .users2{
        visibility:hidden !important;
        }
        </style>";

      }


      ?>
    <a id="showhide" href="#" style="background:#<?php echo $session2?>;">+</a>
    <a id="showhide2" href="#" style="background:#<?php echo $session2?>;">?</a>
    <a id="logout" onclick="return confirm('Are you sure?')" href="logout.php">-</a>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.users').hide();

            $('a#showhide').click(function () {
                $('.users').toggle(400);
            });
        });
    </script>
 <script type="text/javascript">
        $(document).ready(function () {
            $('.users2').hide();

            $('a#showhide2').click(function () {
                $('.users2').toggle(400);
            });
        });
    </script>

   <center><h1>Group Chat In PHP</h1></center>
   <div class="chat">

    <div class="users" style="background-color:#<?php echo $session2?>;">
     <?php include("users.php");?>
    </div>
        <div class="users2" style="background-color:#<?php echo $session2?>;">
     <?php include("users.php");?>
    </div>
    <div class="chatbox">
     <?php
     if(isset($_SESSION['user'])){
      include("chatbox.php");
     }else{
      $display_case=true;
      include("login.php");
     }
     ?>

    </div>
   </div>
  </div>

您可以在此处查看实时版本：http://team3.digital-cultures.net/index.php
只需输入您选择的名称，然后从“开始”和“ Ziel”中选择一个选项，即可开始会话（并打开聊天）。

您能帮我发现错误吗？

谢谢！

最佳答案

似乎事件未绑定到＃showhide2。如果您在文档级别进行聆听，并使其以#showhide作为目标，它可能会起作用。对于动态加载的元素，可能会发生这种情况。

更改

        $(document).ready(function () {
            $('.users2').hide();

            $('a#showhide2').click(function () {
                $('.users2').toggle(400);
            });
        });

至

        $(document).ready(function () {
            $('.users2').hide();

            $(document).on('click','#showhide2',function () {
                $('.users2').toggle(400);
            });
        });

最重要的是，请解决此错误：

chat.js $(".msgs").animate({scrollTop:$(".msgs")[0].scrollHeight});第2行上的$(".msgs")[0]未定义。

没有与$('.msgs')匹配的元素。将其包装如下：

if($('.msgs').length) {
    $(".msgs").animate({scrollTop:$(".msgs")[0].scrollHeight});
}

这也许就是为什么事件没有受到限制的原因。