Question

我开始探索Jquery，我正在研究一个简单的猜测游戏＆＃34;用户必须在1到100之间键入一个数字。我已经设计了5个盒子来记录＆＃34;记录＆＃34;到目前为止所做的猜测，但我无法逐一更新这些盒子。到目前为止，当用户键入他/她的猜测时，他/她键入的数字会更新所有 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" />

我创建了一个working fiddle来证明这一点。

Answer 2

两件事：

一：跟踪用户到目前为止所做的猜测次数。我们会调用此guesses并从0开始。但您需要确保guesses永远不会超过尝试次数（li s）的数量当数组从0开始时，减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)
  }
}

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

2 个答案: