JavaScript do zmiany this.style.backgroundImage

Question

W związku z następującym kodem, jak powinienem zakończyć tileClick(), aby zmienić kliknięty obraz z "tileBack.jpg", aby zamiast tego wyświetlić obraz przypisany do tego konkretnego div w shuffleDeck()? Chodzi mi o to, że funkcja tileClick() ma pobrać kafelek, który aktualnie pokazuje obraz tileBack, a po kliknięciu pokazuje obraz znajdujący się na "odwróconej stronie" tego kafelka.

Do tej pory można zobaczyć, jak próbowałem skierować konkretny klikiet, ale nie jestem pewien, czy w tym miejscu jest używane poprawnie this.. Po drugiej stronie tego oświadczenia, próbowałem robić rzeczy takie jak = "../img/tile_"+tiles[i]+".png";, ale oczywiście problem polega na tym, że i nie istnieje w zasięgu tej funkcji. Moim problemem jest to, że nie mogę wymyślić, jak zrestrukturyzować mój kod, aby uzyskać dostęp do obrazu, który wcześniej został przypisany do danego div. Dla odniesienia "druga strona" płytek jest nazywana "tile _ ##. Png", gdzie "##" jest 2-cyfrową liczbą (01-12).

Jestem bardzo nowy w JS i programowaniu w ogólności, więc prosimy o zachowanie na tyle prostych odpowiedzi, żebym mógł je zrozumieć i wdrożyć.

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 Link: http://jsfiddle.net/Leor6jqr/

Answer 1

Dodaj detektor zdarzeń i bind indeks do zdarzenia wywołującego w trybie drukowania talii.

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

Tutaj myślę, że to jest to, co chcesz:

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

Przykład: http://jsfiddle.net/howderek/g68b73Lv/

Ale tylko mówi ci, jak to zrobić nie robi nie pomoże ci wiedzieć, co jest nie tak.

Problem z twoją funkcją nie był związany z this w związku z tym, jak użyłeś querySelector.

zwraca tylko pierwszy element pasujący do wyszukiwania. querySelectorAll() zwraca NodeList ze wszystkimi dopasowaniami, które można po prostu powtórzyć przez: