Jqueryスクリプトのロードブロッキング：複数のdivに複数の画像を表示/非表示する方法は？

Question

私は効率的なJqueryで解決しようとしているウェブデザインのビットを持っています。そして、私は過去の日に困惑していました。だから私はStackOverflowの専門家に助けを求めるだろうと思った。

チャレンジ：

私は3つのdivの列を持つページがあります。列1はフル解像度の画像を示す。列2は、現在列1に表示されている要素の大きなサムネイルを示しています。列3は、追加可能なすべての要素を示すセレクタ列です。

私は運なしで効率的にjQueryを使用して、次の二つの機能をコーディングしようとしてきた：

• あなたは、カラム3（完全な選択欄）の任意の項目をクリックすると - それは、対応のためのdivを作りますhttp://jsfiddle.net/mzhang23/CGfzq/8/：1
• 2に表示し、目に見えるアイテムあなたが列2上の任意の項目の[閉じる]ボタンをクリックすると、その列に列2の対応するdiv要素と対応するdiv要素を隠し1.

は、例を参照してください。 - これはインプラントしようとする以下のhtml5 "data-eltype"提案ソリューションを運のない状態で提供してください。私は間違って何をしていますか？

Answer 1

私は、あなたのデータをオブジェクトと共に適切に保存することが重要だと思います。あなたは、CSSディスクリプタまたはHTML5形式のデータを使ってこれを行います。

あなたのオブジェクトは、次のようになります。上記のこれを行う方法の数十があるが

<div class="columnA"> 
    <div class="element house"></div> 
</div> 

<div class="columnB"> 
    <div class="element house"></div> 
</div> 

<div class="columnC"> 
    <div data-eltype="house" class="element"></div> 
</div> 

<script type="text/javascript"> 
$(document).load(function(){ 
    $('.columnC .element).click(function(){ 
     $('.columnA, .columnB').find('.' + $(this).data('eltype')).show(); 
    }); 
}); 
</script> 

をHTML5データと共に、両方のCSSセレクタを利用したコードの単純なビットです。 columnC内のオブジェクトがクリックされると、eltypeデータ記述子を使用して列Aのアイテムの可視性を切り替えます。

さらに詳細なオブジェクトセットを使用してJSFiddleを構築することを検討してください。この基本レベルの記述。