2016-06-17 36 views
-4

我有一個從數據庫動態生成的員工列表,每個員工都有一個id,現在我想在每次點擊時打開關於id的將他們的ID顯示在該框中。 我無法訪問與所選id相關的div。將php變量賦值給div id並使用jquery訪問它

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

好了,什麼是問題? – Epodax

+0

我無法訪問與所選僱員相關的div –

+0

您應該寫var var1 = $(this).attr('id');無需調用php變量。 –

回答

0

首先,錨標記<a>帶班.addClass裏面,你正在使用$we['employee_id'],然後你使用$employee_id其爲null,各自的盒子裏,結果未定義的變量錯誤。

你應該給觸發器和目標選擇器一個unqiue標識符,比如.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創建的唯一標識符。比如說.addClassdata屬性包含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'); 
      }); 
    }); 

,做這樣相同的去除分別爲員工分組的框。

注意

隨着彈出框格的是多重的,已經在DOM裏面,你不應該刪除觸發器使用id選擇,因爲這將只針對第一個div而不是其他人,使用類除去股利,以及諸如removeBox

更新刪除

爲了除去股利,不使用ID爲除去股利,改變你的刪除按鈕的以下:

<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'); 
      }); 
    }); 
+0

hi..thanks對你有所幫助的主要功能部分,但仍股利箱沒有出現 –

+0

檢查瀏覽器的控制檯,並告訴我你得到哪些錯誤? ,並且是從php附加到屬性正確的ID? –

+0

hey..thanks..Now其工作,但我不能夠去除調用講座「removeClass」股利。我已經添加了與div中提到的相同的id。 –