我需要有关此记忆游戏的帮助。如下所示，我在index.js第83行的循环应从0变为15，总共有16个值。
for( var i=0; i < clickedCard.length; i++){
/*clickedCard[i].className += " open show";
console.log(clickedCard[i]); for testing-it worksj*/
clickedCard[i].addEventListener("click", function() {
console.log(i);
displayCard(clickedCard[i]);
});
}
相反，它超越了一个。因此，它尝试在少于16个循环中访问位置16处的数组。怎么了？难道是因为闭包而得出了最后一个值？我已经在这个问题上待了好几天了，但仍然找不到错误。谢谢您的帮助。
/*
* Create a list that holds all of your cards
*/
var cardList2 = ["fa-diamond","fa-diamond","fa-diamond","fa-diamond","fa-paper","fa-paper","fa-anchor","fa-anchor","fa-bolt","fa-bolt","fa-cube","fa-cube","fa-leaf","fa-leaf","fa-bicycle","fa-bicycle","fa-bomb","fa-bomb"];
/*
* Display the cards on the page
* - shuffle the list of cards using the provided "shuffle" method below
* - loop through each card and create its HTML
* - add each card's HTML to the page
*/
var displayCards = document.querySelector(".testCardDisplay");
/*displayCards.appendChild(cardList)*/
function createNewCardList(cardlist){
var ulCreation = document.createElement('ul');
ulCreation.className = "";
for(i=0; i < cardlist.length; i++ ){
var liCreation = document.createElement('li');
liCreation.className = "card";
/*liCreation.innerHTML = cardlist[i]; oldWorkingVersion*/
/*liCreation.innerHTML = <i class="fa cardlist[i]"></i>;*/
var iCreation = document.createElement('i');
iCreation.className = "fa ";
iCreation.className += cardlist[i];
liCreation.append(iCreation);
ulCreation.append(liCreation);
ulCreation.className = "deck";
}
/*var ulDock = document.getElementsByClassName("testCardDisplay");*/
var ulDock = document.getElementById("testCard69");
ulDock.parentNode.replaceChild(ulCreation, ulDock);
};
// Shuffle function from http://stackoverflow.com/a/2450976
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
function shuffleAlert() {
setTimeout(function(){ alert("Cards have been reshuffled"); }, 0);
}
/*
* set up the event listener for a card. If a card is clicked:
* - display the card's symbol (put this functionality in another function that you call from this one)
* - add the card to a *list* of "open" cards (put this functionality in another function that you call from this one)
* - if the list already has another card, check to see if the two cards match
* + if the cards do match, lock the cards in the open position (put this functionality in another function that you call from this one)
* + if the cards do not match, remove the cards from the list and hide the card's symbol (put this functionality in another function that you call from this one)
* + increment the move counter and display it on the page (put this functionality in another function that you call from this one)
* + if all cards have matched, display a message with the final score (put this functionality in another function that you call from this one)
*/
/*document.getElementsByClassName("fa").addEventListener("click",checkStatus);*/
var clickedCard = document.getElementsByClassName("card");
console.log(clickedCard.length+"pre")
var currentCard ;
function displayCard( currentCard){
currentCard.className += " open show";;
};
for( var i=0; i < clickedCard.length; i++){
/*clickedCard[i].className += " open show";
console.log(clickedCard[i]); for testing-it worksj*/
clickedCard[i].addEventListener("click", function() {
console.log(i);
displayCard(clickedCard[i]);
});
}html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #ffffff url('../img/geometry2.png'); /* Background pattern from Subtle Patterns */
font-family: 'Coda', cursive;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
/*
* Styles for the deck of cards
*/
.deck {
width: 660px;
min-height: 680px;
background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
padding: 32px;
border-radius: 10px;
box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 0 3em;
}
.deck .card {
height: 125px;
width: 125px;
background: #2e3d49;
font-size: 0;
color: #ffffff;
border-radius: 8px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}
.deck .card.open {
transform: rotateY(0);
background: #02b3e4;
cursor: default;
}
.deck .card.show {
font-size: 33px;
}
.deck .card.match {
cursor: default;
background: #02ccba;
font-size: 33px;
}
/*
* Styles for the Score Panel
*/
.score-panel {
text-align: left;
width: 345px;
margin-bottom: 10px;
}
.score-panel .stars {
margin: 0;
padding: 0;
display: inline-block;
margin: 0 5px 0 0;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Matching Game</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<link rel="stylesheet" href="styles/app.css">
<link rel="shortcut icon" href="">
<script>
var cardList1 = ["fa-diamond","fa-diamond","fa-paper-plane-o","fa-paper-plane-o","fa-anchor","fa-anchor","fa-bolt",
"fa-bolt","fa-cube","fa-cube","fa-leaf","fa-leaf","fa-bicycle","fa-bicycle","fa-bomb","fa-bomb"];
</script>
</head>
<body>
<div class="container">
<header>
<h1>Matching Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span class="moves">3</span> Moves
<div class="restart">
<i class="fa fa-repeat" onclick="cardList1 = shuffle(cardList1); shuffleAlert()"></i>
</div>
</section>
<ul class="deck">
<li class="card ">
<i class="fa fa-diamond "></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card match">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card match">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card open show">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
</ul>
</div>
<button onclick="createNewCardList(cardList1)">createNewCardList</button>
<ul id="testCard69" class="deck testCardDisplay">
</ul>
</body>
<script src="scripts/index.js"></script>
</html>