Question

我正在开发一款记忆游戏。我有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

Answer 1

$deck.append(('<li class="card"><img src = "images/symbols/ ' + img + '/>/li>'))

应该是

$deck.append('<li class="card"><img src="images/symbols/' + img + '" /></li>'))

Answer 2

我不知道$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

2 个答案: