[英]Need to card images on cards for a memory game in JavaScript
我仍在進行記憶游戲。 我有36張圖片和36個數字組成的數組。 我從陣列中隨機抽取了組成卡片的18個數字的數字。 我需要創建卡，然后嘗試將li附加到HTML中的ul中。
這是我的HTML：
<!DOCTYPE html>
<!-- Group 5 CSD 122 The Holodeck - Games-->
<html>
<head>
<title>Games</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<link rel = "stylesheet" type = "text/css" href = "LCARSremake.css">
<link rel = "stylesheet" type = "text/css" href = "matchingGame.css">
<script src = "javascript/matchingGame.js"></script>
</head>
<body>
<div class = "recFrame">
<header>
<div id = "header" class = "lcars-row header">
<div class="lcars-elbow left-bottom"></div>
<div class="lcars-bar horizontal">
<div><h1 class = "title right"> Matching Game </h1></div>
</div>
<div class="lcars-bar horizontal right-end decorated"></div>
</div>
</header>
<div id = "leftmenu" class = "lcars-column start-space lcars-u-1">
<ul style = "list-style-type: none" class = "leftmenu">
<li class = "lcars-u-1 blank1"></li>
<li class = "lcars-u-1 home"><a href = "index.html"> Home </a></li>
<li class = "lcars-u-1 games"><a href = "games.html"> Games </a></li>
<li class = "lcars-u-1 about"><a href = "about.html"> About </a></li>
<li class = "lcars-u-1 blank2"></li>
<li class = "lcars-u-1 blank3"></li>
<li class = "lcars-u-1 blank4"></li>
<li class = "lcars-u-1 blank5"></li>
<li class = "lcars-u-1 blank6"></li>
<li class = "lcars-u-1 blank7"></li>
</ul>
<div class="lcars-bar lcars-u-1"></div>
</div>
<main>
<div id = "contentFrame">
<div class = "lcars-column lcars-u-5">
<section class = "score-panel">
<div id = "startGame">Start Game</div>
<ul class = "rank">
<li><i class="fas fa-circle"></i></li>
<li><i class="fas fa-circle"></i></li>
<li><i class="fas fa-circle"></i></li>
<li><i class="fas fa-circle"></i></li>
</ul>
<span class = "moves">0 </span> MOVES | TIME:
<div class = "timer"></div>
<div class = "restart">
<i class="fas fa-redo"></i>
</div>
</section>
<ul class = "deck">
</ul>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Congratulations</h2>
<a class="close" href=# >×</a>
<div class="content-1">
Congratulations you won!
</div>
<div class="content-2">
<p>You made <span id=finalMove> </span> moves </p>
<p>in <span id=totalTime> </span> </p>
<p>Rating: <span id=starRating></span></p>
</div>
<button id="play-again"onclick="playAgain()">
Play again</a>
</button>
</div>
</div>
</div>
</div>
</main>
<footer>
<div id = "footer" class = "lcars-row">
<div class="lcars-elbow left-top"></div>
<div class="lcars-bar horizontal both-divider bottom"></div>
<span class = "footerContent"><p> LCARS © Michael Okuda </p></span>
<div class="lcars-bar horizontal right-end left-divider bottom"></div>
</div>
</footer>
</div>
</body>
</html>
這是我試圖用來獲取圖像作為列表項的javascript代碼：
// The function init() enables the game to begin
function init() {
// The shuffle function shuffles the objects array
let allCards = shuffle(cardList());
$deck.empty();
// The game starts with no matching cards and zero moves
match = 0;
moves = 0;
$moves.text('0');
// A for loop creates <li> tags with the class of card for every <i> tag
// A class of fa fa- and a name of each object from the objects=[] array
for (let i = 0; i < allCards.length; i++) {
var img = allCards[i] + '.png';
$deck.append(('<li class="card"><img src = "images/symbols/ ' + img + '/>/li>'))
}
addCardListener();
// Enables the timer to reset to 0 when the game is restarted
resetTimer(nowTime);
second = 0;
$timer.text(`${second}`)
initTime();
}
使用調試器，我到達了應該附加的部分，我只是從這里顯示的內容開始：
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
$deck.append(('<li class="card"><img src = "images/symbols/ ' + img + '/>/li>'))
應該
$deck.append('<li class="card"><img src="images/symbols/' + img + '" /></li>'))
我不知道$deck是什么，因為您沒有提供$deck ，所以我不得不有點猜測。 順便提一下，您顯然有很多全局變量，從來都不是一個好主意。
這行沒有產生有效的HTML：
$deck.append(('<li class="card"><img src = "images/symbols/ ' + img + '/>/li>'))
相比於
$deck.append('<li class="card"><img src = "images/symbols/' + img + '"/></li>');
請注意，創建所有元素，然后將它們一次附加到DOM，而不是多次擊中，會更好。
因此，假設這樣標記：
<ul id="deck"></ul>
腳本如：
var $deck = $('#deck');
var mycards = $('<div/>');
var li = $('<li class="card"><img /></li>');
for (let i = 0; i < allCards.length; i++) {
var imgsrc = 'images/symbols/'+ allCards[i] + '.png';
li.find('img').prop('src',imgsrc);
mycards.append(li);
}
$deck.append(mycards.find('li'));
需要幫助完成 JavaScript 中 Memory 紙牌游戲的 function
[英]Need help completing a function for a Memory Card Game in JavaScript
Memory 紙牌游戲“if else”語句不起作用（Javascript）
[英]Memory Card Game “if else” statement not working (Javascript)
Memory 游戲翻轉單張卡片不起作用 - JavaScript
[英]Memory game flipping individual cards isn't working - JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.