1

ここにいる皆さんのおかげで、やっと私のギャラリー サイトが少し前進しました。最後にもう 1 つ質問があります。できれば非常に簡単な質問です。まず、シナリオは次のとおりです。

私はJavascriptが初めてなので、JavaScript BRFOREを学ぼうとしています.jqueryを掘り下げているので、バニラJavaScriptですべてをやろうとしています. すべてのコードには触れずに、ページの上部にサム スライダーがあり、選択したアートワーク (追加のビュー、説明、タイトルなどを含む) が表示されるフィールドを持つアートワークのギャラリーを作成しました。現在、複数の配列を使用するのではなく、「gallery/php」というページを作成しました。このページには、フィールドに呼び出されるすべてのビルド済み div (「generic」というタイトル) が含まれています。innerHTML を使用して、目的のサムネイルが選択されたときに対応する div を ID で呼び出し、「汎用」div の代わりに書き込むように簡単な呼び出しを行っています。

シンプルな...

問題は、私がこれらの約 40 を持っていることです。アートワークが表示されないときに、php をインクルードして非表示の div にインクルードを非表示にすると、ページをロードするのに永遠に時間がかかり、これは非常に悪い考えのように思えます。私がやりたいことは、現在使用している関数を変更して、現在のページで ID を呼び出す代わりに、参照する外部ページと、(ID に基づいて) どの div をプルして「ジェネリック」を設定するかを知ることです。でdiv。現在、スクリプトは次のようになっています。

function changeDiv(art) {
        viewer = document.getElementById('generic'),
        targetInfo = document.getElementById(art);
        viewer.innerHTML = targetInfo.innerHTML; 
}

私がやりたいことは（構文を無視して）です：

function changeDiv(art) {
    viewer = document.getElementById('generic'),
    targetInfo = ***src = gallery.php, #(art);***
    viewer.innerHTML = targetInfo.innerHTML; 
}

私がやりたいことに似ているのは、jquery の .load() だけですが、それを JavaScript に変換する方法がわかりません。

4

1 に答える 1

0

Ok！これが私の試みです。これはおそらくAJAXライブラリ（jQueryなど）を介して精査する必要がありますが、それはOPが要求したものではないことに注意してください.

**また、gallery.php のセットアップを知らなかったので、最善を尽くしました。

**また、これは恐ろしいことであり、検証やその他の良い点がないことも知っていますが、これは概念の証明にすぎません。(実用的なプログラマー向けのトレーサー コード)

gallery.php が次のように設定されていると仮定します。

<?php
    $pull = $_GET["pull"];
    $gallery[0] = "<div>Your art work img tags here</div>";
    $gallery[1] = "<div>Some more art work</div>";
    //Pull from the changeDiv parameter in the JavaScript below.
    echo $gallery[$pull];
?>

次のような JavaScript を使用します。

var changeDiv = function(pull) {
    //Pull parameter indicates an array 
    //index within the gallery.php $gallery array

    var ajaxObj;

    //Our AJAX objet shall be declared
    if(window.XMLHttpRequest) {
        ajaxObj = new XMLHttpRequest();
    }
    else {
        ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //When the ajaxObj changes it's ready 
    //state, do this stuff below
    ajaxObj.onreadystatechange = function() {
        //But only if the ready state is 
        //really ready and the status is good to go
        if(ajaxObj.readyState==4 && ajaxObj.status==200) {
            var response = this.responseText;
            document.getElementById("viewer").innerHTML=response;
        }
    }
    //Open the async connection to 
    //gallery.php and send your GET 
    //global (pull)
    ajaxObj.open("GET","gallery.php?pull="+pull,true);

    //Send it and pray
    ajaxObj.send();
}

http://www.smashingmagazine.com/2008/10/16/50-excellent-ajax-tutorials/ - AJAX のチュートリアル一覧

于 2012-08-07T05:23:18.220 に答える