2

サイトのポートフォリオ ページを作成しています。自分の作品を自分のサイトに表示したいので、この考えを持っています。

画像が10枚の画像と言うように、私のすべての作品を表示します。誰かが特定のサムネイル画像をクリックすると、すべてのサムネイルがフェードアウトし、作品またはプロジェクトに関する詳細がページに表示されます。「閉じる」をクリックすると、現在の作業が消え、すべてのサムネイルが再び表示されます。

私は以下を使用してこれを達成しました：

HTMLコードは次のようになります

<div class="container project_container">
    <div class="four columns project proj1">
        <img src="http://placehold.it/220x220" /></li>
    </div><!-- End three columns -->

    <div class="four columns project proj2">
        <img src="http://placehold.it/220x220" /></li>
    </div><!-- End three columns -->

    <div class="four columns project proj3">
        <img src="http://placehold.it/220x220" /></li>
    </div><!-- End three columns -->

    <div class="four columns project proj4">
        <img src="http://placehold.it/220x220" /></li>
    </div><!-- End three columns -->
</div><!-- End Container -->

<!-- Project 1 to be displayed when all thumbnails are hidden -->
<div id="project1" class="container project_description">
    <div class="eight columns project_image">
        <p>This is an eight column text for image</p>
    </div><!-- End Eight Columns -->

    <div class="eight columns project_details">
        <p>This is an eight column text</p>
        <a href="#" class="close">Close</a>
    </div><!-- End Eight Columns -->
</div><!-- End Container project description -->

jQuery コードは次のようになります。

$('.project_description').hide();

$('.proj1').click(function(){
   $('.project').fadeOut('fast', function(){
     $('#project1').fadeIn('fast');
   });
});

$('.close').click(function(){
    $('#project1').hide();
    $('.project').fadeIn('fast');
});

私の質問は、自分のサイトに 20 個のプロジェクトを配置するとします。後でそれらを追加するとどうなるでしょうか? このように custom.js ファイルにコードを追加し続ける必要がありますか?

$('.proj2').click(function(){
   $('.project').fadeOut('fast', function(){
     $('#project2').fadeIn('fast');
   });
});

$('.close').click(function(){
    $('#project2').hide();
    $('.project').fadeIn('fast');
});

など、proj2 を proj3,4,5,6..... に変更し、project2 を 3,4,5 などに変更しますか?

これを達成する簡単な方法はありますか？上記の方法を実現する方法はありますか?

どんな助けでも大歓迎です。乾杯！

4

5 に答える 5

1

プロジェクトのインデックスをサムネイルのどこかに保存します。データまたは ID のいずれかです。デモ

<div class="four columns project proj1" data-projectindex="1">

jsではなくcssで説明を隠す

.project_description {
    display: none;
}

次に、任意のプロジェクトを処理するシングル クリック ハンドラーを作成します。

$('.project').click(function(){
    var index = $(this).data('projectindex');
    $('.project').fadeOut('fast', function(){
        $('#project' + index).fadeIn('fast');
    });
});

閉じるボタンも一般化する

$('.close').click(function(){
    $('.project_description').hide();
    $('.project').fadeIn('fast');
});
于 2012-12-06T21:58:14.973 に答える
0

.on() - http://api.jquery.com/on/を使用できます

次に、次のようなものです。

$(".project_container").on("click", "div", function(){
  console.log('i hit them all!');
});

（ブラウザでF12を押してコンソールを確認してください）

于 2012-12-06T21:51:48.343 に答える
0

あなたの構造があなたの例とまったく同じであると仮定して、あなたはこのようなことをすることができます

$('.project_description').hide();

$('.project').click(function(){
    var idx = $(this).index(); // get index of clicked project - assuming they are in the same order
   $('.project').fadeOut('fast', function(){      
     $('.project_description').eq(idx).fadeIn('fast'); // fadein only the clicked project
   });
});

$('.close').click(function(){
    $('.project_description:visible').hide(); // hide all visible description
    $('.project').fadeIn('fast');
});​

http://jsfiddle.net/ePbaL/

于 2012-12-06T22:08:05.997 に答える
-1

ループを使用して、イベントをすべての「プロジェクト」にバインドできます。

for (i = 1; i <= projectsNum; i++) {

$('.proj' + i).click(function(){
   $('.project').fadeOut('fast', function(){
     $('#project' + i).fadeIn('fast');
   });
});

$('.close').click(function(){
    $('#project' + i).hide();
    $('.project').fadeIn('fast');
});

}
于 2012-12-06T21:50:26.310 に答える
-1

いいえ、動的にします。

たとえば、LIKE でセレクターを使用すると、次のようになります。

それ以外の

$('#project1').fadeIn('高速');

のようなものを置く

$('div[id^="プロジェクト"]').fadeIn('高速');

また

$("[id^=プロジェクト]").fadeIn('高速');

id が「project」で始まるすべての div を選択する必要があります

クラスでも同じことができます：

$("[クラス^=プロジェクト]")

于 2012-12-06T21:51:34.997 に答える