Javascript更改此.style.backgroundImage

给定以下代码，如何完成

tileClick（）

，以便将单击的图像从“tileBack.jpg”更改为在

shuffleDeck（）

中显示分配给该特定

div

的图像？我的意思是，

tileClick（）

函数应该获取当前显示tileBack图像的磁贴，单击时，显示该磁贴“反面”的图像

到目前为止，您可以看到我是如何尝试针对正在单击的特定互动程序的，尽管我不确定

这一点。

在这里是否正确使用。在这句话的另一方面，我试着做一些事情，比如

=>。/img/tile_“+tiles[I]+.png”

但显然存在的问题是，

i

不在该函数的范围内。我的问题是，我不知道如何重新构造代码，以便访问以前分配给给定

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 = 
    });
}

var-deck=[]；
var-tiles=[]；
风险值来源=[“01”、“02”、“03”、“04”、“05”、“06”、“07”、“08”、“09”、“10”、“11”、“12”]；
var图像=[]；
常数宽度=100；
常数高度=100；
常数NUMTILES=24；
loadImages（）；
buildDeck（）；
shuffledck（7）；
printDeck（）；
函数loadImages（）{
对于（var i=0；i

---

JS Fiddle link:

在这里，我想这就是你想要的：

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();

函数tileClick（）{
var elems=document.queryselectoral（“.tile”）；
对于（变量i=0；i

例如：

但是，仅仅告诉你怎么做并不能帮助你知道哪里出了问题

函数的问题不在于

此

，而在于如何使用

查询选择器

---

querySelector

仅返回与搜索匹配的第一个元素

querySelectorAll（）

返回一个包含所有匹配项的

NodeList

，您只需在该列表中进行迭代即可添加事件侦听器，并

bind

将索引绑定到数据组打印中的调用事件

函数printDeck（）{
对于（变量i=0；i

我对JS和编程基本上都是新手

你写了那段整洁的代码吗？干得好！“你能给我们做个实验吗？”豪德里克：“是的，我现在就做JS小提琴。”汉基웃平心而论，我在学校的第一学期花了大部分时间才走到这一步：）@howderek链接在主帖子的底部。我以前从未使用过JS Fiddle，所以如果我做错了什么，请告诉我。我理解我在使用

querySelector

时犯的错误，谢谢你。但是，我仍然不明白如何让代码在单击互动程序时显示特定的图像。您的代码显示

this.style.backgroundColor='#933'

我需要它说

this.style.backgroundImage='在shuffleDeck（）调用期间存储到这个数组索引中的图像'

。这有意义吗？如果我没有很好地解释自己，我深表歉意。在

printDeck

中创建元素时，您需要分配eventListener。如果您希望元素具有动态内容，这是一个简单的问题解决方案，但将帮助您了解如何将值绑定到方法调用。绑定映像路径也同样容易。检查控制台中的

事件

，查看单击了什么

事件。目标

。您可能还想检查

this

的值，以了解绑定的内容。这不是我学会的方法，但我当然愿意学习。如果我复制并粘贴您的代码，当我点击一个互动程序时，Chrome控制台会打印

MouseEvent{dataTransfer:null，which:1，toElement:div#tile17.tile，fromeelement:null，y:324…}17../img/tile02.png

（其中

tile02.png

取决于我点击的互动程序），这似乎表明引用了正确的数组索引，但磁贴仍然显示tileBack.jpg图像，而不是s