1

最初にすべてのプロジェクトのサムネイルが表示されるポートフォリオに取り組んでいます。サムネイルをクリックすると、コンテンツが読み込まれて表示されます。

ここで、このコンテンツの読み込みのために、ajax をスキップし、必要なすべての情報を JavaScript 変数に入れることにしました。これにより、コンテンツがフェッチされたときに、jquery でコンテナーを作成し、変数で提供された情報を入力して、訪問者に表示されます。 . ここまでは順調ですね。

私が作業できるようにしたいのは、訪問者がプロジェクトをロードするときに、同時に隣接するプロジェクトで画面外にコンテナーを作成する必要があるということです。たとえば、訪問者がプロジェクト番号 3 をクリックすると、プロジェクト 1 と 2 (画面の左側に配置) とプロジェクト 4 と 5 (画面の右側に配置) が読み込まれます。訪問者が作品を見終わったら、前または次をクリックするだけで、その特定のプロジェクトが画面上でスライドします。

しばらくの間、これを最も効率的に構成する方法を検討してきましたが、その方法がわかりません。私を最も悩ませているのは、訪問者がプロジェクト 1 に直行して [前へ] をクリックすることを決定した場合、最後のプロジェクトをどのように提供するかを理解する方法です。

プロジェクト:
1 2 3 4 5 6 7 8 9 10

太字はクリックされたプロジェクトを表し、イタリック体はどのプロジェクトをロードする必要があるかを表します。ご理解のとおり、たとえば、このシナリオで [次へ] をクリックすると、2 がアクティブになり、残念ながらプロジェクト 4 をロード/作成する必要があります。

コンテナが作成されると、次のようになります。

<div id="projects">
    <article class="curr" data-order="1" id="project1">      
        Content
    </article>
</div>

アイデアは、新しいプロジェクトにクラスを追加/追加することです.prev/.nextに#projects

データをフェッチしている変数は次のようになります。

var works = {
    "work":{
        "1":{"id":101,"name":"project-1","title":"Project 1","content":"Text"},
        "2":{"id":201,"name":"project-2","title":"Project 2","content":"Text"},
        "3":{"id":301,"name":"project-3","title":"Project 3","content":"Text"},
        "4":{"id":401,"name":"project-4","title":"Project 4","content":"Text"},
        "5":{"id":501,"name":"project-5","title":"Project 5","content":"Text"},
        "6":{"id":601,"name":"project-6","title":"Project 6","content":"Text"},
        "7":{"id":701,"name":"project-7","title":"Project 7","content":"Text"},
        "8":{"id":801,"name":"project-8","title":"Project 8","content":"Text"},
        "9":{"id":901,"name":"project-9","title":"Project 9","content":"Text"},
        "10":{"id":1001,"name":"project-10","title":"Project 10","content":"Text"},

    }
}

「1」、「2」などは、プロジェクトが表示される順序を表します。さらに、別の変数にプロジェクトの総数があります。しかし、それ以外に、最も効率的な方法でこれにアプローチする方法は、今頭を悩ませています。

考え？

4

2 に答える 2

0

プロジェクトが読み込まれたことを確認してから、現在のプロジェクトの前のプロジェクトと次のプロジェクトを読み込むフラグはどうですか? そうすれば、最後のプロジェクトが読み込まれるため、最初のプロジェクトで [前へ] をクリックしても問題はありません。これをザクエストの回答に適用すると、大丈夫だと思います。

于 2013-07-06T03:30:41.140 に答える