Question

我正在开展一个项目，用户从一块5X5的瓷砖板中挑选一封信并尝试构建一个单词。我创建了一个数组，它选择了最后一个字母并在屏幕上显示该字母。我这样做是通过使用array.push方法将最后选择的字母添加到数组中，然后将该数组打印到

标记中。但是，当我选择第二个/下一个字母时，它会替换第一个字母，而不是仅将其添加到现有单词中。我想使用array.push会使每次单击时单词变长。为什么要取代第一个字母？我错过了什么逻辑。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>letters</title>
</head>

  <link rel = "stylesheet" type="text/css" href="board">
  <script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
  <script type="text/javascript" src="scripts/jquery-ui-1.10.4.custom.js"></script>

  <script type="text/javascript">



   $("document").ready(function() {
                $("#squares").selectable();
                    $( "#squares" ).on('click', 'li', function() {


                var current = this;     

                  $("#squares li.ui-selected").each( function(i, e) {
                    if( e != current) {
                     $(e).removeClass('ui-selected');
                    }  
                  });
                  var finalWord = [];  // create array for final word
                  var txt = $( this ).text();  // get the value of the letter clicked
                  finalWord.push(txt);  // add letter to array
         $("p").html(finalWord); //print the last letter added to the array.

      });
  });



var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

function changeLetters() {
    boardInteval = setInterval(boardGen, 1000);
}

function boardGen() {
    $('li').each(function (i, e) {
      if(!$(e).hasClass( "ui-selected" )) {
        $(e).text(letters.charAt(Math.floor(Math.random() * letters.length)));
      }  
    })
}


changeLetters();




 </script>

<body>



<ol id="squares">
  <li class="A1"></li>
  <li class="A2"></li>
  <li class="A3"></li>
  <li class="A4"></li>
  <li class="A5"></li>
  <li class="B1"></li>
  <li class="B2"></li>
  <li class="B3"></li>
  <li class="B4"></li>
  <li class="B5"></li>
  <li class="C1"></li>
  <li class="C2"></li>
  <li class="C3"></li>
  <li class="C4"></li>
  <li class="C5"></li>
  <li class="D1"></li>
  <li class="D2"></li>
  <li class="D3"></li>
  <li class="D4"></li>
  <li class="D5"></li>

 <div class = "answer">
    <p>  </p>
</div> 
</ol>
</body>
</html>

显示最后选择的字母/文本（array.push）

0 个答案: