需要在JavaScript中为记忆游戏的卡片上添加图像
我仍然在做一个记忆游戏。我有36张图片和36个数字的数组。我从阵列中随机选取了数字，组成了18张牌的数字。我需要创建卡片，我正在尝试将需要在JavaScript中为记忆游戏的卡片上添加图像,javascript,jquery,html,Javascript,Jquery,Html,我仍然在做一个记忆游戏。我有36张图片和36个数字的数组。我从阵列中随机选取了数字，组成了18张牌的数字。我需要创建卡片，我正在尝试将li附加到HTML中的ul 这是我的HTML： <!DOCTYPE html> <!-- Group 5 CSD 122 The Holodeck - Games--> <html> <head> <title>Games</title> <meta charset="U
liul<!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>
游戏
配对游戏
开始比赛
0次移动|时间：
祝贺
恭喜你赢了！
你采取了行动
在
评级：
再玩一次
LCARS©Michael Okuda
// 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();
}
//函数init（）使游戏开始
函数init（）{
//shuffle函数洗牌对象数组
让allCards=shuffle（cardList（））；
$deck.empty（）；
//游戏开始时没有匹配的牌和零移动
匹配=0；
移动=0；
$moves.text（'0'）；
//for循环使用每个标记的卡片类创建标记
//fa-fa-类和objects=[]数组中每个对象的名称
for（设i=0；i/li>”）
}
addCardListener（）；
//使计时器在游戏重新启动时重置为0
重置计时器（nowTime）；
秒=0；
$timer.text（`${second}`）
initTime（）；
}
$deck.append（“/li>”）
$deck.append('<li class="card"><img src="images/symbols/' + img + '" /></li>'))
$deck.append（'））
$deck$deck.append（“/li>”） $deck.append（'）
注意，最好创建所有元素，然后将它们一次附加到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'));
var$deck=$（'#deck'）；
var mycards=$（''）；
var li=$（“看起来很有趣，但我没有得到问题或问题：）您的答案生成无效的HTMLWhere您认为是无效的？会生成一个类似
的元素，请注意，在“mycard”之前，此处的额外空间无效。如果有错误或任何错误信息，请告诉我。请不要认为冗余空间愚蠢。在规范中必须对其进行编码。参见第2.4.3节ref，指出它与HREF相同
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'));