duan205571 2016-06-17 09:33

已采纳

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

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

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

本回答被题主选为最佳回答 , 对您是否有帮助呢?

报告相同问题？

关注问题

在bootstrap模式中将javascript ID转换为PHP变量 ajax javascript jquery php
2015-09-17 20:01

回答 3 已采纳 For Ajax solution, assuming that open modal button is; id="bookid" is the image dynamic id you h
获取元素的ID并将其设置为变量 javascript jquery php
2014-09-24 14:36

回答 6 已采纳 Here 3 options for you. eval (not recommended) You can use the Javascript function eval to achie
jQuery使用ajax发送post变量并提交表单 ajax jquery php
2014-01-02 22:34

回答 2 已采纳 Sounds like you're looking for the .serialize() method: $.post("myfile.php", $("#myform").seriali
php div图片局部刷新,前端jquery 后端 thinkphp 实现局部刷新
2021-04-20 03:15

809790的博客本例用jquery 实现通过把一个标签的变量传递给后台处理后，然后返回给前台另外一个变量大致流程是这样的：前端编写html代码，加入要局部刷新的 jquery代码并指定要响应的url，首先得知道 jquery 是 javascript 的...
如何将变量从javascript传递给symfony2控制器 javascript jquery php symfony
2017-08-23 08:40

回答 1 已采纳 The problem here is that you refresh the page which means that you call the controller without any
如何将PHP url变量传递给AJAX？ ajax jquery php
2012-12-21 05:04

回答 2 已采纳 Change this -- xmlhttp.open("GET","profile.php?id="<?php echo $row['ID'] ?>, true"); To t
如何在php中检查控制台上的变量值？ javascript jquery php
2018-08-24 18:42

回答 1 已采纳 If its only to debug your application code, you can simply add a dump in your php code before if s
php 掌握jquery,Jquery技巧(必须掌握)_jquery
2021-04-12 23:58

姚笑天的博客检查 jQuery 是否加载在使用 jQuery 进行任何操作之前，你需要先确认它已经加载：if (typeof jQuery == 'undefined') {console.log('jQuery hasn\'t loaded');} else {console.log('jQuery has loaded');}返回顶部...
如何在php变量中绑定html的正确语法 jquery php
2015-12-11 16:19

回答 1 已采纳 You need to use single quotes within the onclick attribute and escape them. Try this: $SelectButt
使用一个输入提交多个变量 jquery php
2013-07-26 17:20

回答 2 已采纳 Because they all have the same name attribute, so they set the same variable multiple times and th
在PHP中设置SESSION变量 ajax html javascript jquery php
2013-08-22 22:22

回答 2 已采纳 How about you echo "<span onclick='displayNow('".$_SESSION['tag']."')'>success</span>
将 reCAPTCHA v3 添加到帝国CMS 的 PHP表单并使用Ajax提交
2023-03-02 20:52

Arya Wang的博客在本教程中，我们将使用 Ajax将Google reCAPTCHA v3添加到PHP表单中并提交而不离开页面。如果您的网站上有联系表格或任何此类表格，您就会知道从机器人接收垃圾邮件是多么令人讨厌。Google reCAPTCHA保护您免受垃圾...
各位大佬，关于PHP转换json之后，js接收报错，求解！ html5 javascript mysql php
2019-07-08 17:03

回答 2 已采纳可以了加了下面代码 ``` /************************************************************** * * 使
前端开发_2.jQuery学习总结
2022-01-14 17:53

joyyi9的博客二、jQuery简单使用1.jQuery下载2. jQuery 选择器，遍历3. jQuery 事件,效果4. 链式调用三、jQuery HTML1.获得，设置内容 - text()、html() 以及 val()2.获取，设置属性 - attr()3.添加元素，删除元素4.获取并设置 ...
jQuery前端的进阶，更加方便对元素的操作。
2022-11-08 21:22

ever_up973的博客是一个JavaScript库是一个轻量级的“写的少，作的多”的JavaScript库jQuery库包含以下功能jQuery库包含以下函数HTML 元素选取...即内容分发网络,使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
没有解决我的问题, 去提问

悬赏问题

¥15 安卓adb backup备份应用数据失败
¥15 eclipse运行项目时遇到的问题
¥15 关于#c##的问题：最近需要用CAT工具Trados进行一些开发
¥15 南大pa1 小游戏没有界面，并且报了如下错误，尝试过换显卡驱动，但是好像不行
¥15 没有证书，nginx怎么反向代理到只能接受https的公网网站
¥50 成都蓉城足球俱乐部小程序抢票
¥15 yolov7训练自己的数据集
¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)（相关搜索：51单片机|单片机|测试代码）
¥15 电力市场出清matlab yalmip kkt 双层优化问题
¥30 ros小车路径规划实现不了，如何解决？(操作系统-ubuntu)

码龄粉丝数原力等级 --

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

1条回答默认最新

码龄粉丝数原力等级 --

悬赏问题

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

1条回答 默认 最新

悬赏问题

1条回答默认最新