jqueryの配列内の各画像にclickイベントで画像をフェードインしようとしています。

Question

jqueryの新機能私はサムネイルをクリックすると画像がぼやけてしまいます。それ自体はかなり簡単です。私が持っている問題は、サムネイルがデータベースに格納された配列に格納されていることです。

次のように私はこれを実現することを試みるために一緒に石畳き関数である：

参照用

function display (array) { 
$.each(array, function(i, val){ 
    var imageID=val[0], 
     imageURL=val[7]; 

'<img id="'+ imageID +'" src="images/'+ imageURL +'" width="100" height="123" />'; 

    $('#container').append(
     '<div id="'+array[i][0]+'" style="position: absolute; left:'+array[i][8]+'px; top: '+array[i][9]+'px;"><img src=images/'+array[i][6]+' id=nav width=85 height=85></div>' 
    ); 

    $("#"+array[i]).click(function() { 
      $("#"+imageID).fadeIn('slow', function () { 
       // animation complete 
      }); 
     }); 
    }); 
} 

、 配列[i]が[0]の画像のIDを指す（データベース内の数アレイ[i] [8]とアレイ[i] [9]は、サムネイルの位置です。 array [i] [6]はサムネイルの場所です。 array [i] [7]はフルサイズの画像の場所です。彼らはサムネイルのページ上の座標です。

jqueryの知識があれば誰でも一見して数多くの欠陥を見ることができると思います。私はかなり新しいですが、私はこれに新しいですので、私は穏やかにしてください！

私は問題が退色する必要のある画像を特定できると考えています - 私は確信していません

'<img id="'+ array[i][0] +'" src="'+ array[i][6] +'" alt="" width="100" height="123" />'; 

が正しい。

正しい方向のポインターは非常に高く評価されます。事前に

おかげで ステフさてあなたはjQueryを介してすべてのロードを主張する場合

Answer 1

、ここでそれを行うための一つの方法ですが、私は一般的にjQueryを通じてEVERYTHINGをロードに対して助言します。

var content_images = ''; 
var content_thumbs = ''; 
$.each(array, function(i, val){ 

    var imageID=val[0], imageURL=val[7]; 

    content_images += '<img id="'+ imageID +'" src="images/'+ imageURL +'" width="100";height="123" />'; 
    content_thumbs += '<div onclick="showImage('+imageID+')" style="position: absolute; left:'+array[i][8]+'px; top: '+array[i][9]+'px;"><img src=images/'+array[i][6]+' id=nav width=85 height=85></div>'; 
}); 

function showImage(id) { 
    $('#'+id).fadeIn(slow, function(){}); 
} 

$('#imageContent').html(content_images); 
$('#thumbContent').html(content_thumbs); 

JavaScriptとHTMLをあまり書き込まないようにしてください。 JSに焦点を当てて、表示ロジックを提供しますが、表示自体は純粋なHTMLにしておきます。すべてをデバッグしやすくします。たとえば、サムネイルにインラインCSSを使用する代わりに、「親指」クラスを与えてそのCSSを通常のCSSに書き込むのはなぜですか？ JSに毎回同じ内容を書き込ませる必要はありません。その他...