javascript - 从不同的文件夹加载图像

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"