我是 PHP、MYSQL、JQUERY 的初学者。
我打算将照片库(ul)加载到 div 中。
以下代码段运行良好,并且应用于该元素及其子元素的样式也适用。
WHERE 子句仅用一个参数(TabFotosVisivel=1)就足以加载 12 张图片。
请检查以下片段:
索引.PHP
<div id="idDivTC">
<ul>
$result = mysql_query("SELECT * FROM TabFotos WHERE TabFotosVisivel=1 ORDER BY TabFotosID DESC LIMIT 0,12");
while($row = mysql_fetch_array($result)){
$caminhoArquivo=$row["TabFotosCamArqMini"];
$descricao=$row["TabFotosDescricao"];
$titulo=$row["TabFotosTitulo"];
echo("<li><img class='claFotoMiniatura' src='".$caminhoArquivo."' title='".$titulo."' alt='".$descricao."'></li>");
}//fim do while
</ul>
</div><!-- /idDivTC -->
//-----------index.php的样式------------
#idDivTC ul li {
display:inline;
}
#idDivTC ul li img{
margin:1px;
float:left;
}
现在我想将另一个画廊加载到相同的结构中,并使用 Jquery 用纯 PHP 调用页面。
WHERE 子句 id 'idLido' 的附加参数。
代码是
//------------ index.php的jquery----------
$(".claSubMenu").click(function (){
var idLido=$(this).attr("alt");
$.post("miniatura.php", { idLido:idLido})
.done(function(data) {
var arrayRetorno=new Array();
arrayRetorno=data.split("@");
for (i=0;i<arrayRetorno.length;i++){
$("#idDivTC ul").append(arrayRetorno[i]);
}
});
});
MINIATURA.PHP
<?php
require_once("bd.php");
$idLido=$_POST['idLido'];
$sentenca = "SELECT * FROM TabFotos WHERE TabFotosFKGalerias = ".$idLido." AND TabFotosVisivel=1";
$result = mysql_query($sentenca);
while ($row = mysql_fetch_array($result)){
$titulo=$row['TabFotosTitulo'];
$descricao=$row['TabFotosDescricao'];
$caminhoArquivo=$row['TabFotosCamArqMini'];
$retorno=$retorno."<li><img class='claFotoMiniatura' src='".$caminhoArquivo."' title='".$titulo."' alt='".$descricao."'></li>@";
}
echo $retorno;
mysql_close($con);
?>
检索数据后,Jquery/javascript 将其转换为数组。
这是我的观点:正如我所说,我想在调用时读取该数组的每个值并将其附加到该元素/列表中
$(".claSubMenu").click(function (){
通过
for (i=0;i<arrayRetorno.length;i++){
$("#idDivTC ul").append(arrayRetorno[i]);
}
它有效,但样式不再适用。在我看来,前一个块与后者不同,尽管它们具有相同的 ID。
此外,这个点击事件
$("#idDivTC ul li > img").click(function (e){ ...
调用 JqueryUI 对话窗口,但它也仅适用于前一种结构。
我怎样才能实现我的意图?
谢谢
另外,这是模态对话框窗口(Ui JQuery)的代码:
//-------------------------------- index.php的模态----------------
$("#idDivTC ul li > img").click(function (e){
e.preventDefault();
var titulo = $(this).attr("title");
var alternativa = $(this).attr("alt");
var imagemObj = new Image();
var caminhoArquivo=$(this).attr("src");
imagemObj.src= caminhoArquivo;
imagemObj.onload = function()
{
var largura=imagemObj.width;
var altura=imagemObj.height;
$(this).clone().dialog({
title: function (){
return titulo+" - "+caminhoArquivo;
},
modal: true,
resizable: false,
draggable: true,
width: function(){
return largura;
}
//fim da funcao da largura
});//fim da da this clone
};// fim da imagem load
});
//-----------------------------