0

さて、この質問をする前に。私の目標を説明させてください。コードをできるだけ少なくして、同時に多くの機能を利用できるようにしたいのです。私はこれを自分自身と同僚に対して「美しいコード」として造語しました。

問題は次のとおりです。ボックスをクリックし、クリックしたボックスに基づいて目的のコンテンツでパネルをフェードインさせたいのです。ただし、2 つのクラスを使用することはできず、ID を再利用することはできません。

コードは次のとおりです。http://jsfiddle.net/2Yr67/

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

私を喜ばせる2つのアイデアがありました。

A) 1 つのパネルがフェードインし、「クリック」された「maingrid」ボックスに基づいてコンテンツがパネルに入力される B) どの「maingrid」が選択されたかに基づいて、コンテンツがフェードインする特定のパネルがある

私はあなたが私のためにそれをするように頼んでいるのではなく、単に私がやりたいことをするために必要な構文に向けて私をプッシュしてください.

前もって感謝します！

4

1 に答える 1

0

最初に行うことは、パネルの HTML 要素をメイングリッド要素の近くに移動することです。これにより、正しい要素を順番に非表示/表示できます。すべてのパネルを独自の個別の要素に配置すると、DOM 操作を行う必要がなくなります。行う必要はありません。簡単にするために、各パネルを関連付けられているメイングリッド要素の直後に配置しました。

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>

メイングリッドと同じ 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/

于 2014-04-11T18:21:02.650 に答える