jquery的追加不重複的圖像對象refernce

Question

工作我有一個10個圖像，每個 圖像表示數字0-9在一個特殊的字體（因此圖像）

，以提高性能和延遲，我預-loaded下面的圖像類似如下：

function createDigit() { 
    for (var i = 0; i < 10; i++) { 
     var obj = new Image; 
     obj.src = 'digit' + i + '.png'; 
     digitHash[i] = obj; 
    } 
    } 

所以在數字散列，我有索引從0到9的按鍵，並且每個相應的值是圖像對象的引用，其中SRC被映射到圖像文件的位置。

現在在我的html，我有一個div標籤

<div id='digits'></div> 

說現在我想顯示 '2000' 所以我有以下的jQuery

$('#digits').append(dightHash[2], dightHash[0], dightHash[0], dightHash[0]); 

只顯示 '20' 在firefox控制檯中進行了一些調試和打印之後，我注意到它在不止一次追加同一圖像引用時發生！ 換句話說，在「2000」第二零和第三零不所附，因此我們只有「20」

如果我追加以下：

$('#digits').append(dightHash[2], dightHash[3], dightHash[4], dightHash[5]); 

我得到的「全部顯示2345'，因爲沒有重複的圖像參考追加

如何解決此問題？ 是否有任何比jQuery的append方法我可以使用？

感謝

Answer 1

是的，實際上附加在你的DOM移動，而不是自動讓你的追加對象的副本。

您可以撥打.clone()使追加把你的圖像的副本並添加它，而不是圍繞裁判移動

$('#digits').append(dightHash[2], $(dightHash[0]).clone(), $(dightHash[0]).clone(), $(dightHash[0]).clone()); 

Answer 2

正如已解釋，.append()不管它是指定移動的對象位置。它不會製作對象的副本。

正因爲如此，我建議你剛纔創建這樣所需的對象，然後你不必擔心重複的數字，因爲他們將各獲得自己的形象對象是這樣的：

// create an individual image 
function makeDigit(n) { 
    var img = new Image(); 
    img.src = 'digit' + n + '.png'; 
    return(img); 
} 
// Force all images into browser memory cache for fast loading: 
function cacheDigits() { 
    for (var i = 0; i < 10; i++) { 
     digitHash.push(makeDigit(i)); 
    } 
} 


$('#digits').append(makeDigit(2), makeDigit(0), makeDigit(0), makeDigit(0));