PHP动态表与jQuery链接(PHP dynamic table linked with jQuery)
我的问题是我无法获得对话框div和其中的所有其他div，以根据所选图像显示动态变量。
我希望能够动态显示用户图片的表格，并且当他们的图片被点击包含动态表格的div时淡化为黑色，并且包含用户图片和其他信息的弹出窗口显示使用JQUERY。 一切正常，但随后弹出显示用户点击的相应变量。
从td内的$memberdisplaylist开始， $firstname和$member_pic根据数组正确显示，但是当点击$member_pic时，对话框div弹出窗口继续显示第1行的变量，并且不显示与行有关的变量其中$member_pic被选中。 关于我做错了什么以及如何解决这个问题的任何想法？
也有人知道jQuery编码我需要将我的对话框div popup放在包含我的动态表的profilepicsdark div中吗？
PHP
$MemberDisplayList = "<table border='0' align='left' cellpadding='7'>"; $sql = mysql_query("SELECT * FROM users WHERE email_activated='1'"); $counter = 0; while($row = mysql_fetch_array($sql)){ $id = $row["id"]; $firstname = $row["first_name"]; $sex = $row["sex"]; $age = $row["age"]; $focus = $row["focus"]; $lastlog = $row["last_log_date"]; $firstnameCut = substr($firstname, 0, 10); $check_pic = "members/$id/image01.jpg"; if (file_exists($check_pic)) { $member_pic = "<img src=\"members/$id/image01.jpg\" width=\"100px\" border=\"0\" />"; } else { $member_pic = "<img src=\"members/0/image01.jpg\" width=\"100px\" border=\"0\" />"; } if( $counter % 7 == 0) $MemberDisplayList .= '<tr>'; $counter++; $MemberDisplayList .= '<td>'; $MemberDisplayList .= '<a href="" title="' . $firstname . '"><font size="-2">' . $firstnameCut . '</font></a><br /><div class="memberpreviewpopup" style=" height:100px; overflow:hidden;">' . $member_pic . '</div><div class="boxes"><div id="dialog" class="window"><div id="title">' . $member_pic . '</div><div id="info">' . $firstname . '</div><div id="info">' . $lastlogdate . '</div><div id="info">' . $sex . '</div><div id="info">' . $age . '</div><div id="info">' . $focus . '</div><a href="" class="close"/>Close it</a><a href="profile.php?id=' . $id . '">View Profile</a></div></div></td>'; if( $counter % 7 == 0) $MemberDisplayList .= '</tr>'; } // close while loop $MemberDisplayList .= "</table>";JQUERY
<script type="text/javascript"> function codeBinsAddEvent(obj,type,fn){ if(obj.attachEvent){ if(type == "load"){ obj.attachEvent('on'+type, fn); } else{ obj.attachEvent('onreadystatechange', fn); } /* obj['e'+type+fn]=fn; obj[type+fn]=function(){ obj['e'+type+fn](window.event)} ;obj.attachEvent('on'+type,obj[type+fn])*/ } else obj.addEventListener(type,fn,false) }; function codeBinsAddLoadEvent(fn){ codeBinsAddEvent(document.addEventListener&&!window.addEventListener?document:window,'load',fn) }; function codeBinsAddReadyEvent(fn){ codeBinsAddEvent(document,'DOMContentLoaded',fn) }; </script> <script type="text/javascript"> $(function() { $(".memberpreviewpopup").click(function(e) { e.preventDefault(); var $dialog = $("#dialog"); var maskHeight = $('.profilepics').height(); var maskWidth = $('.profilepics').width(); $('#profilepicsdark').css({ 'width': maskWidth, 'height': maskHeight }); $('#profilepicsdark').fadeIn(100); $('#profilepicsdark').fadeTo("fast", 0.8); var winH = $('.profilepics').height(); var winW = $('.profilepics').width(); $('#profilepicsdark').css('top', winH / 2 - $dialog.height() / 2); $('#profilepicsdark').css('left', winW / 2 - $dialog.width() / 2); $dialog.fadeIn(400); }); $('.window .close').click(function(e) { e.preventDefault(); $('#profilepicsdark').hide(); $('.window').hide(); }); $('#profilepicsdark').click(function() { $(this).hide(); $('.window').hide(); }); }); </script>CSS
<style type="text/css"> #profilepicsdark{ width: 100%; height: 100%; z-index:9000; background-color:#000; opacity:0.5; display:none; } #dialog{ position: absolute; padding:0px; width:250px; height:250px; background-color:#d4e1ff; display:none; z-index:99999; } #dialog #msg{ margin-left:20px; padding:5px; font-size:14px; } #dialog #title{ margin:0px; padding:5px; float: left; } #dialog #info{ width: 100px; margin-right:20px; padding:5px; font-size:14px; float: right; text-align:right; } #dialog .close{ float:right; background:#afa1f5; bordercolor:1px solid #445cd88; border-radius: 1.2em; width:100px; text-align:center; font-size:13px; } #dialog .close:hover{ background:#af55d9; bordercolor:1px solid #445cd88; } </style>My problem is that I can't get the dialog div and all the other divs inside of it to display the dynamic variables according to the image selected.
I want to be able to dynamically display a table of user pics and when their picture is clicked on the div containing the dynamic table fades to black and a popup containing the users picture and other information shows using JQUERY. Everything works but then popup displaying the respective variables of the user clicked on.
Beginning in the $memberdisplaylist inside the td the $firstname and $member_pic display properly according to the array but when the $member_pic is clicked on, the dialog div popup keeps displaying variables from row 1 and does not display the variables in respect to the row of which $member_pic is selected. Any thoughts on what I am doing wrong and how to fix this?
Also does anyone know the jQuery coding I would need to center my dialog div popup inside my profilepicsdark div containing my dynamic table?
PHP
$MemberDisplayList = "<table border='0' align='left' cellpadding='7'>"; $sql = mysql_query("SELECT * FROM users WHERE email_activated='1'"); $counter = 0; while($row = mysql_fetch_array($sql)){ $id = $row["id"]; $firstname = $row["first_name"]; $sex = $row["sex"]; $age = $row["age"]; $focus = $row["focus"]; $lastlog = $row["last_log_date"]; $firstnameCut = substr($firstname, 0, 10); $check_pic = "members/$id/image01.jpg"; if (file_exists($check_pic)) { $member_pic = "<img src=\"members/$id/image01.jpg\" width=\"100px\" border=\"0\" />"; } else { $member_pic = "<img src=\"members/0/image01.jpg\" width=\"100px\" border=\"0\" />"; } if( $counter % 7 == 0) $MemberDisplayList .= '<tr>'; $counter++; $MemberDisplayList .= '<td>'; $MemberDisplayList .= '<a href="" title="' . $firstname . '"><font size="-2">' . $firstnameCut . '</font></a><br /><div class="memberpreviewpopup" style=" height:100px; overflow:hidden;">' . $member_pic . '</div><div class="boxes"><div id="dialog" class="window"><div id="title">' . $member_pic . '</div><div id="info">' . $firstname . '</div><div id="info">' . $lastlogdate . '</div><div id="info">' . $sex . '</div><div id="info">' . $age . '</div><div id="info">' . $focus . '</div><a href="" class="close"/>Close it</a><a href="profile.php?id=' . $id . '">View Profile</a></div></div></td>'; if( $counter % 7 == 0) $MemberDisplayList .= '</tr>'; } // close while loop $MemberDisplayList .= "</table>";JQUERY
<script type="text/javascript"> function codeBinsAddEvent(obj,type,fn){ if(obj.attachEvent){ if(type == "load"){ obj.attachEvent('on'+type, fn); } else{ obj.attachEvent('onreadystatechange', fn); } /* obj['e'+type+fn]=fn; obj[type+fn]=function(){ obj['e'+type+fn](window.event)} ;obj.attachEvent('on'+type,obj[type+fn])*/ } else obj.addEventListener(type,fn,false) }; function codeBinsAddLoadEvent(fn){ codeBinsAddEvent(document.addEventListener&&!window.addEventListener?document:window,'load',fn) }; function codeBinsAddReadyEvent(fn){ codeBinsAddEvent(document,'DOMContentLoaded',fn) }; </script> <script type="text/javascript"> $(function() { $(".memberpreviewpopup").click(function(e) { e.preventDefault(); var $dialog = $("#dialog"); var maskHeight = $('.profilepics').height(); var maskWidth = $('.profilepics').width(); $('#profilepicsdark').css({ 'width': maskWidth, 'height': maskHeight }); $('#profilepicsdark').fadeIn(100); $('#profilepicsdark').fadeTo("fast", 0.8); var winH = $('.profilepics').height(); var winW = $('.profilepics').width(); $('#profilepicsdark').css('top', winH / 2 - $dialog.height() / 2); $('#profilepicsdark').css('left', winW / 2 - $dialog.width() / 2); $dialog.fadeIn(400); }); $('.window .close').click(function(e) { e.preventDefault(); $('#profilepicsdark').hide(); $('.window').hide(); }); $('#profilepicsdark').click(function() { $(this).hide(); $('.window').hide(); }); }); </script>CSS
<style type="text/css"> #profilepicsdark{ width: 100%; height: 100%; z-index:9000; background-color:#000; opacity:0.5; display:none; } #dialog{ position: absolute; padding:0px; width:250px; height:250px; background-color:#d4e1ff; display:none; z-index:99999; } #dialog #msg{ margin-left:20px; padding:5px; font-size:14px; } #dialog #title{ margin:0px; padding:5px; float: left; } #dialog #info{ width: 100px; margin-right:20px; padding:5px; font-size:14px; float: right; text-align:right; } #dialog .close{ float:right; background:#afa1f5; bordercolor:1px solid #445cd88; border-radius: 1.2em; width:100px; text-align:center; font-size:13px; } #dialog .close:hover{ background:#af55d9; bordercolor:1px solid #445cd88; } </style>最满意答案
我想我已经知道你想在这里完成什么。 发生的事情是，在没有您正在查看预览的成员的上下文的情况下调用#dialog div。
它有点乱，但是如果你做了以下调整，你应该在上下文中调用#dialog。
HTML：
$MemberDisplayList .= ' <a href="" title="'.$firstname.'"><font size="-2">' . $firstnameCut . '</font></a> <br /> <div class="memberpreviewpopup" member_id="'.$id.'" style=" height:100px; overflow:hidden;"> '.$member_pic.' </div> <div class="boxes"> <div id="dialog" member_id="'.$id.'" class="window"> <div id="title">' . $member_pic . '</div> <div id="info">' . $firstname . '</div> <div id="info">' . $lastlogdate . '</div> <div id="info">' . $sex . '</div> <div id="info">' . $age . '</div> <div id="info">' . $focus . '</div> <a href="" class="close"/>Close it</a> <a href="profile.php?id=' . $id . '">View Profile</a> </div> </div> </td>';使用Javascript：
$(".memberpreviewpopup").click(function(e) { e.preventDefault(); // This has been updated ============== var member_id = $(this).attr('member_id'); var $dialog = $('#dialog[member_id="'+member_id+'"]'); // ==================================== $('#profilepicsdark').css({ 'width': maskWidth, 'height': maskHeight }); $('#profilepicsdark').fadeIn(100); $('#profilepicsdark').fadeTo("fast", 0.8); var winH = $('.profilepics').height(); var winW = $('.profilepics').width(); // This should fix the alignment issue with the box you mentioned ==== var profilepicsdark_top = winH / 2 - $dialog.height() / 2; var profilepicsdark_left = winW / 2 - $dialog.width() / 2; $('#profilepicsdark').css('top', profilepicsdark_top); $('#profilepicsdark').css('left', profilepicsdark_left); $dialog.css('top', profilepicsdark_top*2); $dialog.css('left', profilepicsdark_left*2); // =================================================================== $dialog.fadeIn(400); });I think I have an idea of what you're trying to accomplish here. What's happening is that the #dialog div is called without the context of the member you're viewing a preview of.
It's a little messy, but if you make the following adjustments you should be about to call #dialog in context.
HTML:
$MemberDisplayList .= ' <a href="" title="'.$firstname.'"><font size="-2">' . $firstnameCut . '</font></a> <br /> <div class="memberpreviewpopup" member_id="'.$id.'" style=" height:100px; overflow:hidden;"> '.$member_pic.' </div> <div class="boxes"> <div id="dialog" member_id="'.$id.'" class="window"> <div id="title">' . $member_pic . '</div> <div id="info">' . $firstname . '</div> <div id="info">' . $lastlogdate . '</div> <div id="info">' . $sex . '</div> <div id="info">' . $age . '</div> <div id="info">' . $focus . '</div> <a href="" class="close"/>Close it</a> <a href="profile.php?id=' . $id . '">View Profile</a> </div> </div> </td>';Javascript:
$(".memberpreviewpopup").click(function(e) { e.preventDefault(); // This has been updated ============== var member_id = $(this).attr('member_id'); var $dialog = $('#dialog[member_id="'+member_id+'"]'); // ==================================== $('#profilepicsdark').css({ 'width': maskWidth, 'height': maskHeight }); $('#profilepicsdark').fadeIn(100); $('#profilepicsdark').fadeTo("fast", 0.8); var winH = $('.profilepics').height(); var winW = $('.profilepics').width(); // This should fix the alignment issue with the box you mentioned ==== var profilepicsdark_top = winH / 2 - $dialog.height() / 2; var profilepicsdark_left = winW / 2 - $dialog.width() / 2; $('#profilepicsdark').css('top', profilepicsdark_top); $('#profilepicsdark').css('left', profilepicsdark_left); $dialog.css('top', profilepicsdark_top*2); $dialog.css('left', profilepicsdark_left*2); // =================================================================== $dialog.fadeIn(400); });更多推荐
发布评论