猜谜游戏更新 <li> 用户使用jQuery猜测元素

Question

我开始探索Jquery，并且正在研究一个简单的“猜谜游戏”，用户必须在1 -100之间输入一个数字。 我设计了5个框来“记录”到目前为止所做的猜测，但是我无法一一更新这些框。 到目前为止，当用户键入他/她的猜测时，他/她键入的数字将更新我的所有li元素（框）。 我希望它用第一个猜测来更新第一个框，用第二个猜测来更新第二个框...我怎样才能做到这一点？ 我应该使用append（）而不是text（）吗？ 如果是这样，我该怎么办？ 谢谢！

到目前为止，这是我的代码：

$(document).ready(function() {
  var newGame = new Game();
  console.log("document ready");
  $("#submit").click(function(e) {
    makeAguess(newGame);
  });

  $("#player-input").keypress(function(e) {
    if (e.which == 13) {
      makeAguess(newGame);
    }
  });
}); 


function makeAguess(game) {
  var input = $("#player-input").val();
  $("#player-input").val("");
  var output = game.playersGuessSubmission(parseInt(input));
  if (output === "You have already guessed that number." && output !== "You Lose.") {
    $("h1").replaceWith("<h1>" + "Please guess again!" + "</h1>");
  } else {
    $("#guesses li").text(function (){   // here is where I am having trouble.
      return input; 
    })
  }
}

我当前的输出：

Answer 1

到目前为止，当用户输入他/她的猜测时，他/她输入的数字将更新所有我的li元素（框）

• 为了更新与猜测相对应的框，您需要使框唯一。

• 另外，您需要跟踪用户已经进行了多少次尝试

您可以结合以上两点并提出一种方法，如下所示-

 var totalGuesses = 0; jQuery("#submitGuess").on("click", function(e) { if(totalGuesses < 5) { totalGuesses++; var userGuessed = jQuery("#userGuess").val(); jQuery("#guess"+totalGuesses).html(userGuessed); } else { jQuery("#noMoreGuesses").html("Max Guesses Reached!"); } }); 

 #userGuessLog { display: inline; margin: 10px; } .ugVal { display: inline; padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="userGuessLog"> <div id="guess1" class="ugVal"> </div> <div id="guess2" class="ugVal"> </div> <div id="guess3" class="ugVal"> </div> <div id="guess4" class="ugVal"> </div> <div id="guess5" class="ugVal"> </div> </div> <div id="noMoreGuesses"> </div> <input type="text" name="userGuess" id="userGuess" value="" /> <input type="submit" name="submitGuess" id="submitGuess" value="Submit Guess" /> 

我创建了一个工作提琴来演示这一点。

Answer 2

两件事情：

一：跟踪用户到目前为止所做的猜测数目。 我们将其称为guesses ，从0开始。但是，您需要确保guesses不会超过数组从0开始的尝试次数（ li的数量）为负1的结果。也许要检查一下：

if ( guesses < max_guesses ) { // let's play }

二：对选定对象的数组使用jQuery的eq方法，以特定对象为目标。

$("#guesses li").eq(guesses).text(input)

我们在一起：

$(document).ready(function() {
  var newGame = new Game();
  var guesses = 0;
  console.log("document ready");
  $("#submit").click(function(e) {
    makeAguess(newGame, guesses);
    guesses++;
  });

  $("#player-input").keypress(function(e) {
    if (e.which == 13) {
      makeAguess(newGame, guesses);
      guesses++;
    }
  });
}); 


function makeAguess(game, guesses) {
  var input = $("#player-input").val();
  $("#player-input").val("");
  var output = game.playersGuessSubmission(parseInt(input));
  if (output === "You have already guessed that number." && output !== "You Lose.") {
    $("h1").replaceWith("<h1>" + "Please guess again!" + "</h1>");
  } else {
    $("#guesses li").eq(guesses).text(input)
  }
}