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

时间:2015-04-26 17:37:48

标签: php jquery css toggle

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

当用户登录时,点击链接“showhide”应显示“用户”类。 当用户注销时,链接“showhide”被隐藏,而链接“showhide2”是可见的,当按下它时应显示“users2”类。

我在网上发现了一个jQuery-snippet,它可以正常使用链接“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”中选择一个选项,即可开始会话(并打开聊天)。

你能帮我找错吗?

谢谢!

1 个答案:

答案 0 :(得分: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 $(".msgs").animate({scrollTop:$(".msgs")[0].scrollHeight});第2行的

$(".msgs")[0]未定义。

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

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

这也许就是为什么这个事件没有受到约束。