js 修改backgroundimg_Javascript改变this.style.backgroundImage

给定以下代码,我将如何完成tileClick()以便从“tileBack.jpg”更改单击的图像,而是显示在shuffleDeck()中分配给该特定div的图像？我的意思是,tileClick()函数应该采用当前显示tileBack图像的图块,并在单击时显示该图块“反面”的图像.

到目前为止,您可以看到我是如何尝试定位被点击的特定磁贴,但我不确定这一点.在这里正确使用.在该陈述的另一方面,我试图做一些像=“../img/tile_”tiles [i]“.png”;但显然问题是我在该功能的范围内不存在.我的问题是,我无法弄清楚如何重构我的代码,以便我可以访问以前分配给给定div的图像.作为参考,瓦片的“另一侧”被命名为“瓦片_ ##.png”,其中“##”是2位数字(01-12).

我对JS和编程很新,所以请保持简单的答案,让我理解和实施.

var deck = [];

var tiles = [];

var sources = [ "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12" ];

var images = [];

const WIDTH = 100;

const HEIGHT = 100;

const NUMTILES = 24;

loadImages();

buildDeck();

shuffleDeck(7);

printDeck();

function loadImages() {

for (var i = 0; i < sources.length; i++) {

images[i] = "../img/tile_"+sources[i]+".png";

}

}

function buildDeck() {

for (var i = 0; i < 2; i++) {

for (var j = 0; j < sources.length; j++) {

var tempTile = {};

tempTile.val = sources[j];

tempTile.img = images[j];

deck.push(tempTile);

}

}

}

function shuffleDeck (numTimes) {

for (var i = 0; i < numTimes; i++) {

for (var j = 0; j < deck.length; j++) {

var tempTile = deck[j];

var randI = j;

while ( randI == j ) {

randI = Math.floor(Math.random() * deck.length );

}

deck[j] = deck[randI];

deck[randI] = tempTile;

}

}

}

function printDeck() {

for (var i = 0; i < NUMTILES; i++) {

tiles[i] = document.getElementById("tile"+i);

console.log(deck[i].img);

tiles[i].style.backgroundImage = "../img/tileBack.jpg";

}

}

function tileClick() {

document.querySelector(".tile").addEventListener("mousedown", function () {

this.style.backgroundImage =

});

}