将php变量分配给div id并使用jquery访问它

Question

我有一个从数据库动态生成的员工列表，每个员工都有一个 id，现在我想在每次点击时打开一个关于 id 的 div 框，并在该框中显示他们的 id。 我无法访问关于所选 id 的 div。

        include 'connect.php';
$ert=mysql_query("Select * from login_session where bit='0' and date='$date'") or die(mysql_error());
 while($we=mysql_fetch_array($ert)){
                            $employee_id=$we['employee_id'];
 ?>

 <li> <a href="#" data-employee="<?php echo $we['employee_id']; ?>" class="addClass"><?php echo $we['name'];?></a></li>
<div class="popup-box chat-popup" id="employee_<?php echo $employee_id; ?>">
            <div class="popup-head">
                <div class="popup-head-left pull-left"><img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" alt="iamgurdeeposahan"> Gurdeep Osahan

                </div>
                <div class="popup-head-right pull-right">
                    <div class="btn-group">
                                    <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
                                       <i class="glyphicon glyphicon-cog"></i> </button>
                                      <ul role="menu" class="dropdown-menu pull-right">
                                        <li><a href="#">Media</a></li>
                                        <li><a href="#">Block</a></li>
                                        <li><a href="#">Clear Chat</a></li>
                                        <li><a href="#">Email Chat</a></li>
                                      </ul>
                    </div>

                        <button data-widget="remove"  class="removeClass chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button>
                </div>
            </div>
            <div class="popup-messages">

            <div class="direct-chat-messages">
                    <div class="chat-box-single-line">
                                <abbr class="timestamp">October 8th, 2015</abbr>
                    </div>
                    <!-- Message. Default to the left -->
                    <div class="direct-chat-msg doted-border">
                        <div class="direct-chat-info clearfix">
                        <span class="direct-chat-name pull-left">Osahan</span>
                        </div>
                      <!-- /.direct-chat-info -->
                      <img alt="message user image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
                        <div class="direct-chat-text">
                        Hey bro, how’s everything going ?
                        </div>
                        <div class="direct-chat-info clearfix">
                        <span class="direct-chat-timestamp pull-right">3.36 PM</span>
                        </div>
                        <div class="direct-chat-info clearfix">
                        <span class="direct-chat-img-reply-small pull-left">

                        </span>
                        <span class="direct-chat-reply-name">Singh</span>
                        </div>
                      <!-- /.direct-chat-text -->
                    </div>
                    <!-- /.direct-chat-msg -->
                    <div class="chat-box-single-line">
                        <abbr class="timestamp">October 9th, 2015</abbr>
                    </div>
            <!-- Message. Default to the left -->
                    <div class="direct-chat-msg doted-border">
                        <div class="direct-chat-info clearfix">
                        <span class="direct-chat-name pull-left">Osahan</span>
                        </div>
                      <!-- /.direct-chat-info -->
                      <img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
                        <div class="direct-chat-text">
                        Hey bro, how’s everything going ?
                        </div>
                        <div class="direct-chat-info clearfix">
                        <span class="direct-chat-timestamp pull-right">3.36 PM</span>
                        </div>
                        <div class="direct-chat-info clearfix">
                          <img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img big-round">
                        <span class="direct-chat-reply-name">Singh</span>
                        </div>
                      <!-- /.direct-chat-text -->
                    </div>
                  </div>
                </div>
            <div class="popup-messages-footer">
                <textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>
                <div class="btn-footer">
                <button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button>
                <button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button>
                <button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button>
                <button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button>
                </div>
            </div>
      </div>
<script>
   $(function(){
 $(".addClass").click(function () {
          var var1=$(this).data('employee');
          $('#employee_'+var1).addClass('popup-box-on');
            });

 $(".removeClass").click(function () {
          var var1=$(this).data('employee');
          $('#employee_'+var1).removeClass('popup-box-on');
            });
     })


 </script>

Answer 1

首先，在带有类 .addClass 的锚标记 <a> 内，您使用的是 $we['employee_id']，然后对于相应的框，您使用的是空值 $employee_id，它会导致未定义的变量错误。

你应该给触发器和目标选择器一个独特的标识符，例如对于 .addClass 你可以使用data 属性将数据附加到目标对象。往下看：

<a href="#" data-employee="<?php echo $we['employee_id']; ?>" class="addClass"><?php echo $we['name'];?></a>

然后对于相应的盒子 id，您可以为其分配一个唯一的 id，例如：

<div class="popup-box chat-popup" id="employee_<?php echo $employee_id; ?>">

最后在 javascript / jquery 中，您可以使用 data 属性值并放置我们为目标 div 创建的唯一标识符来触发它们。假设.addClass 的data 属性包含34，这是一个员工ID，而.popup-box 将包含id="employee_34"，因为我们需要用一些独特的东西来识别它们，而不仅仅是数字。

 $(function(){
  $(".addClass").click(function () {
          var var1=$(this).data('employee');
          $('#employee_'+var1).addClass('popup-box-on');
            });
  });

最后你的 php 和 html 代码应该是这样的：

include 'connect.php';
$ert=mysql_query("Select * from login_session where bit='0' and date='$date'") or die(mysql_error());
 while($we=mysql_fetch_array($ert)){
                            ?>
 <li> <a href="#" data-employee="<?php echo $we['employee_id']; ?>" class="addClass"><?php echo $we['name'];?></a></li>
<div class="popup-box chat-popup" id="employee_<?php echo $employee_id; ?>">
            <div class="popup-head">
                <div class="popup-head-left pull-left"><img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" alt="iamgurdeeposahan"> Gurdeep Osahan

                </div>
                <div class="popup-head-right pull-right">
                    <div class="btn-group">
                                    <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
                                       <i class="glyphicon glyphicon-cog"></i> </button>
                                      <ul role="menu" class="dropdown-menu pull-right">
                                        <li><a href="#">Media</a></li>
                                        <li><a href="#">Block</a></li>
                                        <li><a href="#">Clear Chat</a></li>
                                        <li><a href="#">Email Chat</a></li>
                                      </ul>
                    </div>

                        <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button>
                </div>
            </div>
            <div class="popup-messages">

            <div class="direct-chat-messages">
                    <div class="chat-box-single-line">
                                <abbr class="timestamp">October 8th, 2015</abbr>
                    </div>
                    <!-- Message. Default to the left -->
                    <div class="direct-chat-msg doted-border">
                        <div class="direct-chat-info clearfix">
                        <span class="direct-chat-name pull-left">Osahan</span>
                        </div>
                      <!-- /.direct-chat-info -->
                      <img alt="message user image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
                        <div class="direct-chat-text">
                        Hey bro, how’s everything going ?
                        </div>
                        <div class="direct-chat-info clearfix">
                        <span class="direct-chat-timestamp pull-right">3.36 PM</span>
                        </div>
                        <div class="direct-chat-info clearfix">
                        <span class="direct-chat-img-reply-small pull-left">

                        </span>
                        <span class="direct-chat-reply-name">Singh</span>
                        </div>
                      <!-- /.direct-chat-text -->
                    </div>
                    <!-- /.direct-chat-msg -->
                    <div class="chat-box-single-line">
                        <abbr class="timestamp">October 9th, 2015</abbr>
                    </div>
            <!-- Message. Default to the left -->
                    <div class="direct-chat-msg doted-border">
                        <div class="direct-chat-info clearfix">
                        <span class="direct-chat-name pull-left">Osahan</span>
                        </div>
                      <!-- /.direct-chat-info -->
                      <img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
                        <div class="direct-chat-text">
                        Hey bro, how’s everything going ?
                        </div>
                        <div class="direct-chat-info clearfix">
                        <span class="direct-chat-timestamp pull-right">3.36 PM</span>
                        </div>
                        <div class="direct-chat-info clearfix">
                          <img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img big-round">
                        <span class="direct-chat-reply-name">Singh</span>
                        </div>
                      <!-- /.direct-chat-text -->
                    </div>
                  </div>
                </div>
            <div class="popup-messages-footer">
                <textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>
                <div class="btn-footer">
                <button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button>
                <button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button>
                <button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button>
                <button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button>
                </div>
            </div>
      </div>

    <?php } ?>

你的javascript代码如下：

 $(function(){
  $(".addClass").click(function () {
          var var1=$(this).data('employee');
          $('#employee_'+var1).addClass('popup-box-on');
            });
  });

并以同样的方式删除员工 div 的相应框。

注意

由于弹出框 div 是多个并且已经在 dom 内，因此您不应该使用 id 选择器来删除触发器，因为它只会针对第一个 div 而不是其他 div，也可以使用一个类来删除 div比如removeBox

删除更新

要删除 div，不要使用 id 删除 div ，将删除按钮更改为以下内容：

 <button data-widget="remove" data-employee="<?php echo $we['employee_id']; ?>" class="chat-header-button removeClass pull-right" type="button"><i class="glyphicon glyphicon-off "></i></button>

并使用下面的 jquery 代码删除 div

$(function(){
  $(".removeClass").click(function () {
          var var1=$(this).data('employee');
          $('#employee_'+var1).removeClass('popup-box-on');
            });
  });