更改this.style.backgroundImage的Javascript

Question

給定以下代碼，我如何完成tileClick()才能將單擊的圖像從“ tileBack.jpg”更改為顯示在shuffleDeck()分配給該特定div的圖像？ 我的意思是， tileClick()函數應該采用當前顯示tileBack圖像的tile，並在單擊時顯示該tile的“反面”的圖像。

到目前為止，您可以看到我如何嘗試定位要單擊的特定圖塊，盡管我不確定this. 在這里正確使用。 在該語句的另一側，我嘗試執行= "../img/tile_"+tiles[i]+".png"; 但顯然存在的問題是， i不在該函數的范圍之內。 我的問題是我無法弄清楚如何重組代碼，以便可以訪問先前分配給給定div的圖像。 作為參考，圖塊的“另一面”命名為“ 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小提琴鏈接： 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+"')";
}

Answer 2

在這里，我想這就是您想要的：

function tileClick() {
    var elems = document.querySelectorAll(".tile");
    for (var i = 0; i < elems.length; ++i) {
        elems[i].addEventListener("mousedown", function (event) {
            this.style.backgroundColor = '#933';
        });
    }
}

tileClick();

示例： http ： //jsfiddle.net/howderek/g68b73Lv/

但是，僅告訴您如何做並不能幫助您了解問題所在。

與功能的問題是不是與this它與你如何使用querySelector 。

querySelector僅返回與您的搜索匹配的第一個元素。 querySelectorAll()返回具有所有匹配項的NodeList ，您可以迭代遍歷