1

JSON配列を返すPHPスクリプトを介してデータを収集した後、HTMlコンテンツをdivに追加しようとしています。必要なすべてのコンテンツを含む文字列変数に返されたデータを正常に解析しましたが、最初は機能しません。varsをfirebugでチェックし、すべてのロードと解析に問題はありませんでした。誰か助けてもらえますか？完全なコードのサンプルを次に示します。最初の関数は、phpスクリプトからデータをロードします...

function LoadProds(idf){
if (idf){
    request = '../controllers/returnprods.php?idfamilia='+idf;

    $.getJSON(request,function(data){
    if (!data.resultado){
    nProds = data.length;

    for (i = 0; i < nProds; i++){
        htmlContent = '<div class="cartigo">\n <div class="cartigodetalhe">';
        h1Content = ' <h1>'+data[i].nome+'</h1>'
        h2Content = '<h2>'+data[i].preco+'€&lt;/h2> \n</div>'
        imgContent = '<img src="images/products/'+data[i].fullpath+'" width="183px"    height="87px"> \n </div>';

        divproduto = htmlContent+h1Content+h2Content+imgContent;
        sProdutos = sProdutos + divproduto;
    }
    ncurrPos = 0;
}
}); 

}else{
return "(empty)";
}
}

2つ目は、click（）イベントを使用して解析されたデータをロードし、外観を変更します

$(".cbotaogrande").click(function(){
activeid = "#"+$('img[src$=".png"]').attr("id");
if (activeid){
    activeimg = $(activeid).attr("src");
    activeimg = activeimg.substr(0,activeimg.length - 7)+".jpg";
    $(activeid).attr("src", activeimg);
}
activebtn = $(this).attr("id");
activebtn ="#img"+activebtn.substr(4);
tmpsource = $(activebtn).attr("src");
$(activebtn).attr("src",tmpsource.substr(0,tmpsource.length-4)+"_on.png");

activebtn = "cgradiente"+activebtn.substr(4);

$(".cbotoestopo").attr("id",activebtn);
$(".clogo").attr("id",activebtn);

LoadProds($(this).attr("comment")); // Calls the load data function above...


$(".cartigo").remove();  // Remove divs existentes com produtos
if (sProdutos != ''){
    $("#cprodutos").append(sProdutos); 
    sProdutos = '';
}else{
    sProdutos = '';
}

});

あなたが私を助けてくれることを願っています。前もって感謝します

4

1 に答える 1

1

コードの次のセクションを含める必要があります。

$(".cartigo").remove();  // Remove divs existentes com produtos
if (sProdutos != ''){
    $("#cprodutos").append(sProdutos); 
    sProdutos = '';
}else{
    sProdutos = '';
}

のコールバックのLoadProds()関数で$.getJSON()。

$.getJSON()データをフェッチするために非同期呼び出しを行います。これが意味するのは、JavaScriptコードが停止せず、これが終了するのを待ってから次の行に進むということです。したがって、元のコードでは、呼び出した後、データがフェッチされて変数が設定される前に、すぐLoadProds()に次のブロックに進みます。ifこれが2回目に機能するように見える理由です。もう一度クリックすると、その時点までにデータが読み込まれているためです。

于 2012-08-13T16:36:13.697 に答える