0

PHP、MYSQL、JQUERYの初心者です。

フォトギャラリー(ul)をdivにロードするつもりでした。

次のスニペットは適切に機能し、その要素とその子に適用されたスタイルも機能します。

WHERE句は、1つのパラメータ(TabFotosVisivel = 1)だけで12枚の画像をロードするのに十分です。

次のスニペットを確認してください。

INDEX.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
});

// ------------------------------

4

1 に答える 1

0

1 つには、イベント委任を使用してクリック ハンドラーをアタッチし$("#idDivTC ul li > img").click(...)ます$("#idDivTC ul").on("click", "img", ...)

新しく作成された要素にはクリック イベントがバインドされていないため、イベントは発生しません。

于 2013-02-26T17:19:14.917 に答える