メイクの説明divはクリック時に動的に表示されます

Question

現在、画像プレビューが表示される3つの画像divと3つの説明divがあります。 col-md-4 product-quickviewをクリックすると、画像プレビューがdescription divに表示されます。

私はその時点で1つの画像しか表示しないので、私はHTMLで3つの画像記述divを持つことを躊躇しません。私は1つ動的に、

Working jsfiddle

$('.descriptions .panel').hide(); 
$('#grid .product-quickview').click(function(){ 
    var idx = $(this).parents('.col-md-3').index(); 
    var row = $(this).parents('.col-md-3').parent().next('.row'); 
    $('#grid img').removeClass('highlight'); 
    $(this).addClass('highlight'); 
    //$('.descriptions .panel').hide(); 
    row.find('.descriptions .panel').eq(idx).toggle("slow","swing"); 
}); 

は、だから私は達成しようとしている効果は3つのハードコード化された記述のdivを削除し、1つの動的人口のdivとそれらを交換することであるjQueryのコードによって移入ベースwan't画像プレビューをクリックします。

追加情報が必要な場合は、私にお知らせください。私が提供します。

Answer 1

私が探している機能については、あまり明確ではないかもしれません。 このバージョンには、現在表示されている画像/ descの1つの領域しかありません。最初に開くだけで、クリックに基づいて変更されます。画像の説明は、クリックした画像のデータタグdata-descにあります。

Working jsFiddle