改变 this.style.backgroundImage 的 Javascript

Question

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

到目前为止，您可以看到我是如何尝试定位被单击的特定磁贴的，尽管我不确定此处是否正确使用了 this.。在该声明的另一边，我尝试做类似 = "../img/tile_"+tiles[i]+".png"; 的事情，但显然问题在于i 不存在于该函数的范围内。我的问题是我不知道如何重构我的代码，以便我可以访问以前分配给给定 div 的图像。作为引用，图 block 的“另一面”被命名为“tile_##.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 = 
    });
}

JS Fiddle 链接:http://jsfiddle.net/Leor6jqr/

Answer 1

添加事件监听器并将索引绑定(bind)到您的 Deck 打印中的调用事件。

function printDeck() {
    for (var i = 0; i < NUMTILES; i++) {
        tiles[i] = document.getElementById("tile"+i);
        console.log(deck[i].img);
        tiles[i].style.backgroundImage = "url('../img/tileBack.jpg')";
        tiles[i].addEventListener("mousedown", tileClick.bind(this, i));
    }
}

//  *** Game Functions *** //

function tileClick(index) {
    console.log('img', event, index, deck[index].img);
    tiles[index].style.backgroundImage = "url('"+deck[index].img+"')";
}