使用jQuery实现猜数字游戏：逐个更新<li>元素记录用户猜测值

嘿，这个问题我太熟啦！你现在遇到的问题是每次输入都会把所有<li>一起更新，核心原因是你没有指定要更新哪一个具体的盒子——得先跟踪已经填了几个，然后精准定位到下一个要更新的<li>就行，完全不用慌！

具体实现思路 #

首先，我们需要一个变量来记录当前已经完成的猜测次数，这样就能知道该更新第几个盒子。然后每次用户提交猜测时，按这个计数去找到对应索引的<li>元素，更新它的内容就好。

代码示例 #

假设你的HTML结构是这样的：

<!-- 存放猜测记录的列表 -->
<ul id="guess-boxes">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<!-- 用户输入区域 -->
<input type="number" id="user-guess" min="1" max="100" placeholder="输入1-100的数字">
<button id="submit-btn">提交猜测</button>

对应的jQuery代码可以这么写：

// 初始化猜测计数，从0开始（因为元素索引是从0算起的）
let guessTimes = 0;

// 给提交按钮绑定点击事件
$('#submit-btn').click(function() {
  // 获取用户输入的数字
  const inputVal = $('#user-guess').val().trim();
  
  // 先做输入验证：确保是1-100之间的有效数字
  if (!inputVal || inputVal < 1 || inputVal > 100) {
    alert("请输入1到100之间的有效数字哦！");
    return;
  }
  
  // 检查是否还有剩余的盒子可以填写（最多5次猜测）
  if (guessTimes < 5) {
    // 用eq()方法根据索引选取对应的<li>，更新它的文本内容
    $('#guess-boxes li').eq(guessTimes).text(inputVal);
    // 计数加1，准备下一次猜测
    guessTimes++;
    // 清空输入框，方便用户输入下一个数字
    $('#user-guess').val('');
  } else {
    alert("已经用完5次机会啦！");
  }
});

关于append()的疑问 #

你问是否应该用append()？其实要看你的需求：

• 如果你的初始页面上没有那5个<li>盒子，想要每次猜测后动态添加一个新的盒子，那append()是合适的（比如$('#guess-boxes').append('<li>' + inputVal + '</li>')）。
• 但你已经提前创建好了5个<li>，只是需要按顺序填充内容，那直接用eq()定位已有元素更新内容就更高效，完全不需要append()。

这样修改后，第一个猜测值会填到第一个盒子，第二个到第二个，直到5个盒子都填满为止，完美解决你的问题！

内容的提问来源于stack exchange，提问作者Monique