嘗試應用圖像淡入點擊事件到jQuery中的數組中的每個圖像

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（一個號碼在數據庫中table） array [i] [6]是縮略圖的位置 array [i] [7]是全尺寸圖像的位置 array [i] [8]和array [i] [9]應該是不言自明，它們是縮略圖頁面上的座標。

我想任何具有jquery知識的人都能夠第一眼看到大量的缺陷。我重複，雖然我很新，所以請溫柔與我（！）

我懷疑問題在於能夠確定圖像，需要淡入 - 我不知道如果

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

是正確的。

任何在正確的方向指針將非常讚賞。

在此先感謝 燕姿

Answer 1

那麼，如果你堅持要加載它全部通過jQuery的，這裏是做到這一點的一種方式，但我一般會建議不要通過jQuery的加載一切。

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中編寫如此多的CSS和HTML。專注於JS給你顯示邏輯，但保持顯示本身純HTML。使一切都變得更容易調試。例如，爲什麼不給他們一個「拇指」類，並在正常的CSS中寫入CSS？ JS不需要每次都寫出相同的內容。其他...