用于切换类的 jQuery 函数存在两次，但只能工作一次

Question

我有一个 index.php 页面，无论您激活会话还是注销，其内容都会发生变化。

当用户登录时，点击链接“showhide”应该会显示类“users”。 当用户退出时，链接“showhide”被隐藏，而链接“showhide2”是可见的，当它被按下时应该显示类“users2”。

我在网上找到了一个 jQuery-sn-p，它完全可以做到这一点，并且可以很好地用于链接“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”中选择一个选项，您的会话就会开始（并打开一个聊天）。

你能帮我找出错误吗？

谢谢！

Answer 1

似乎某个事件未绑定到#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 第 2 行的$(".msgs").animate({scrollTop:$(".msgs")[0].scrollHeight}); $(".msgs")[0] 未定义。

没有匹配 $('.msgs') 的元素。用以下内容包装它：

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

这可能是事件未绑定的原因。