问题描述
|
我的问题与PHP,jQuery和CSS有关。
我想在while循环中制作一个灯箱,然后让灯箱为我提供每一行的信息。
有一个问题,因为它为每一行创建了灯箱,而对于position:absolute,我们只能看到结果中的最后一行。我不想看到最后一个,但希望灯箱根据单击的行向我显示信息。
这是代码:
jQuery的:
$(document).ready(function(){
$(\'.lightBox\').click(function(){
$(\'.Boxi\').css(\'display\',\'block\');
});
});
PHP:
$result = $db->query(\"SELECT * FROM destinations WHERE direction=1;\");
while ($rows = MysqL_fetch_array($result)) {
$name = $rows[\'name\'];
$table .= \'<div class=\"destionations\">
<div class=\"name\">Prej: <strong>\'.$name.\'</strong></div>
<table width=\"100%\" class=\"extra\" cellspacing=\"1\" cellpadding=\"5\" border=\"0\" >
<tr class=\"bgC3\" style=\"font-weight:bold\">
<td width=\"20\"></td>
<td>Deri</td>
<td width=\"50\">Çmimi</td>
\'.managment::cmimet_e_caktuara($name).\'
</tr>
</table>
<div class=\"buttoni\">
<a href=\"#\" class=\"lightBox\">test</a>
<div class=\"Boxi\">\'.$name.\'</div>
<form action=\"\" method=\"POST\">
<input type=\"text\" name=\"new_city\">
<input type=\"hidden\" name=\"prej\" value=\"\'.$name.\'\">
<input type=\"submit\" name=\"new_dest\" value=\"Shto destinacionin\">
</form>
</div>
</div>\';
}
}
解决方法
好像您要将div变成灯箱?您可以尝试将.boxi上的当前CSS调整为显示:无;并在其上设置一个z-index-然后将您的javascript调整为如下所示:
$(\'.lightbox\').click(function(){
$(\'.boxi\').show();
return false;
});
单击.lightbox时,抓住下一个lightobx容器可能会变得更加复杂-我建议您在fancybox.net上查看Fancybox插件,这是我通常使用的插件。祝好运!
, $(document).ready(function(){
$(\'.lightbox\').click(function(){
$(\'.boxi\').css(\'display\',\'block\');
$(\'.boxi\').css(\'z-index\',\'999999\');
});
});
我尝试了此操作,是因为我认为它将为选定的块提供更高的z-index,但没有真正的原始索引,将永远无法工作。
我真的离jQuery太远了!