jQueryトラバーリングと簡単なコード？

Question

大丈夫、この質問をする前に。私に私の目標を説明させてください：私はできるだけ小さなコードを書きたい、そしてまだ同じ時間にトンの機能を持つことができるようにしたいです。私はこれを自分と同僚に「美しいコード」と巻き込んでいます。

これは問題です：私はどのボックスに基づいてどのボックスに基づいて望ましいコンテンツでフェードインするパネルをクリックしたいです。私が2つのクラスを使用できず、IDを再利用することはできません。

これはコードです。 http://jsfiddle.net/2yr67/

$('.maingrid').click(function(){
    //'maingrid' fade out
    //'panel' fade in with proper content
});

.

私には2つのアイデアがありました。

a）1つのパネルフェードインを持ち、コンテンツはクリックした「MAINGRID」ボックスに基づいてパネルに入ります。 b）どの「Maingrid」を選択したコンテンツがフェードインで特定のパネルを持つ

私はあなたが私のためにそれをすることを求めていない、私が欲しいものをするのに必要な構文に向かって私を押すだけで私をプッシュする

事前にありがとう！

Answer 1

最初にすることは、パネルのHTML要素をMAINRID要素に近づけることです。これにより、正しい要素を順番に非表示/表示することができます。すべてのパネルを自分の個別の要素に持つと、DOMの操作を行う必要はないはずです。簡単にするために、私はそれが関連していたMAINGRID要素の直後に各パネルを置きます。

HTML構造

<div class=".mainContainer">
   <div class='maingrid'></div>
   <div class='panel'></div>
   <div class='maingrid'></div>
   <div class='panel'></div>
   <div class='maingrid'></div>
   <div class='panel'></div>
   <div class='maingrid'></div>
   <div class='panel'></div>
</div>

.

MAINGRIDと同じCSSを持つようにパネルクラスを追加しました。

.maingrid, .panel {
    height: 345px;
    width: 345px;
    float: left;
    /* [disabled]background-color: #000; */
    margin-top: 5px;
    margin-right: 5px;
    cursor: pointer;
    overflow: hidden;
}
.panel{
    display:none;
    color:white; 
}

.

現在の要素をクリックし、次のパネル要素にフェードアウトします。

$('.maingrid').click(function(){
        var $that = $(this);
        $(this).fadeOut(function(){  //This will wait until the fadeOut is done before attempting to fadeIn.
            $that.next().fadeIn();
        });
    });
    $('.panel').click(function(){
        var $that = $(this);
        $(this).fadeOut(function(){
            $that.prev().fadeIn();
        });
    }); 

.

ホバーが最初のホバーイベントにテキストを表示しないバグのようです。

jsfiddle： http://jsfiddle.net/mdjfe/