与jquery链接的php动态表
问题描述：
我的问题是我无法获得对话框div和其中的所有其他divs显示动态变量根据所选图像。与jquery链接的php动态表
我希望能够动态显示用户图片的表格，并且当他们的图片被点击时，包含动态表格的div淡入淡出，并且弹出窗口包含用户图片和其他使用JQUERY显示的信息。一切正常，但弹出窗口显示用户单击的各个变量。
从td中的$ memberdisplaylist开始，根据数组正确显示$ firstname和$ member_pic，但当单击$ member_pic时，对话框div弹出窗口不断显示来自行1的变量，并且不显示变量尊重$ member_pic选中的行。任何想法，我在做什么错误，以及如何解决这个问题？
也没有人知道jquery编码我需要将我的对话框div弹出到我的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>
答
我想我有一个想法，你在这里试图完成。发生了什么事是#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);
});
有关生成的HTML输出可能会比PHP代码更加有利。 – Nope
在我的HTML页面上，这是显示在只有：