jQuery-切换 class 的函数存在两次，但只起作用一次

Question

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

用户登录后，单击 link "showhide" 应该会显示 class "users"。当用户注销时，link "showhide" 是隐藏的，而 link "showhide2" 是可见的，它应该显示 class "users2" 当它按下。

我在网上找到了一个 jQuery-snippet，它完全可以做到这一点并且适用于 link "showhide" 不幸的是，它不适用于 link "showhide2" - class 始终可见...

这是我的代码：

<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 只需输入您选择的名称，然后从 "Start" 和 "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);
            });
        });

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

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

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

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

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

jQuery-切换 class 的函数存在两次，但只起作用一次

jQuery-function to toggle class exists twice, but only works once

php

jquery

css

toggle