duan205571
2016-06-17 09:33
浏览 43

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

I have a list of employees generated dynamically from database, and each employee has got an id, now I want to open a div box on each click with respect to the id's and display their id's in that box. I am not able to access that div with respect to the id selected.

        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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doujiebo9849 2016-06-17 09:46
    已采纳

    Firstly , inside the anchor tag <a> with class .addClass , you are using $we['employee_id'] and then for it's respective box you are using $employee_id which is null and it results to an undefined variable error.

    You should give the trigger and target selectors a unqiue identifiers , such as for .addClass you can use data attributes for appending the data to target something. look below:

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

    and then for respective box id you can assign a unique id to it something like:

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

    and at the end inside javascript / jquery , you can trigger them with the data attribute value and by placing the unique identifier we have created for target div. let say .addClass's data attribute contains 34, which is a employee id , and .popup-box will have id="employee_34" as we need to identify them with something unique and not only numbers.

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

    at the end you php and html code should look like this:

    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 } ?>
    

    and your javascript code like below:

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

    and do in this way same for removing the respective box for employee div.

    Note

    As the popup-box div's are multiple and are already inside the dom , you should not use id selector for remove trigger , as it will target only first div and not others , use an class for removing the div as well such as removeBox

    Update for remove

    For removing the div, don't use id for removing the div , change your remove button to the following:

     <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>
    

    and use the below jquery code for removing the div

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

相关推荐 更多相似问题