从不同文件夹加载图像

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"