我的问题是我无法获取对话框 div 和其中的所有其他 div 来根据所选图像显示动态变量。
我希望能够动态显示用户图片表，并且当单击包含动态表的 div 上的图片时，会淡入黑色，并且使用 JQUERY 显示包含用户图片和其他信息的弹出窗口。一切正常，但随后弹出显示用户单击的相应变量。
从$memberdisplaylisttd 内部开始，$firstname并$member_pic根据数组正确显示，但是当$member_pic单击 时，对话框 div 弹出窗口继续显示第 1 行的变量，并且不显示与$member_pic所选行相关的变量。关于我做错了什么以及如何解决这个问题的任何想法？
还有人知道我需要在包含动态表的 profilepicsdark div 中将对话框 div 弹出窗口居中的 jQuery 编码吗？
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>";
查询
<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>