從不同文件夾加載圖像

Question

所以我想從不同文件夾加載不同的圖像。我有一個小小的謎題，你可以將格式改爲例如3x3,3x4,4x3和4x4等，現在我希望當有人點擊「選擇格式」並選擇3x3時，它會從3x3文件夾加載圖像，如果有人點擊在4x4我想從4x4文件夾的圖像。

該文件夾看起來像/images/3x3/1.png或/images/4x4/1.png。因爲它現在是所有圖片都從同一個文件夾加載。任何想法如何解決這個問題？我試着做一個新的變量，然後使用if語句從不同的文件夾中選擇，但它沒有奏效。

這裏是爲了更好地理解代碼：

代碼： http://jsfiddle.net/Cuttingtheaces/vkyxgwo6/19/

其中的文件夾應該改變，因爲現在它僅使用圖像文件夾來獲取圖像的一部分：

function changeFormat(x, y) { 
    var puzzlepieces = []; 
    var finalValue = x * y - 2; 

for (var i = 0; i <= finalValue; ++i) { 
    puzzlepieces.push(i); 
} 

puzzlepieces.push('blank') 
createSlidingpuzzle(puzzlepieces, x, y); 
} 

function createSlidingpuzzle(puzzlepieces, x, y) { 

var puzzle = '<div id="slidingpuzzleContainer' + x + 'x' + y + '">'; 
cols=x; 
puzzlepieces=shuffle(puzzlepieces); 
for (var puzzleNr = 0; puzzleNr < puzzlepieces.length; ++puzzleNr) { 
    puzzle += '<img src="images/' + puzzlepieces[puzzleNr] + '.png" class="puzzlepiece" id="position' + puzzlepieces[puzzleNr] + '" alt="' + puzzlepieces[puzzleNr] + '" onclick="shiftPuzzlepieces(this);" width="100" height="100" />'; 
} 
puzzle += '</div>'; 

showSlidingpuzzle(puzzle); 
} 

非常感謝提前。

Answer 1

如果你想爲圖像的URL像格式爲： 「/images/3x3/1.png」 比你要改變這行代碼：

puzzle += '<img src="images/' + puzzlepieces[puzzleNr] + '.png" class="puzzlepiece" id="position' + puzzlepieces[puzzleNr] + '" alt="' + puzzlepieces[puzzleNr] + '" onclick="shiftPuzzlepieces(this);" width="100" height="100" />'; 

到

puzzle += '<img src="images/' + x + 'x' + y + '/' +[puzzleNr] + '.jpg" class="puzzlepiece" id="position' + puzzlepieces[puzzleNr] + '" alt="' + puzzlepieces[puzzleNr] + '" onclick="shiftPuzzlepieces(this);" width="100" height="100" />'; 

這是分叉你的版本的一個工作實例：JsFiddle。如果你檢查img元素，你可以看到它有這樣的來源

src="images/3x3/4.jpg"