如何用jQuery实现点击按钮后高亮0-99序列中的指定数字

问题场景 #

需要生成0到99的数字序列，点击按钮后将两个输入框指定的数字用<strong>标签加粗高亮，已编写基础HTML和jQuery框架代码，需完善脚本实现需求。

初始HTML代码 #

<input type="number" id="field1" value="2"/>
<br>
<input type="number" id="field2" value="99"/>
<br>
<button type="button" id="getBtn">show me the highlighted numbers</button>
<br>

<div id="sequence"></div>

完善后的jQuery脚本 #

$('#getBtn').on("click", function() {
  // 将输入框的字符串值转为整数，避免类型不匹配导致的判断误差
  const target1 = parseInt($('#field1').val(), 10);
  const target2 = parseInt($('#field2').val(), 10);
  
  let sequenceContent = '';

  // 遍历生成0-99的数字序列
  for (let i = 0; i <= 99; i++) {
    // 匹配目标数字则用strong标签包裹，否则直接拼接数字
    if (i === target1 || i === target2) {
      sequenceContent += `<strong>${i}</strong> `;
    } else {
      sequenceContent += `${i} `;
    }
  }

  // 将拼接好的内容插入页面容器，移除末尾多余空格
  $('#sequence').html(sequenceContent.trim());
});

关键说明 #

1. 类型转换：用parseInt把输入框的字符串值转为数字，避免字符串与数字类型不匹配引发的判断错误
2. 动态构建内容：遍历过程中逐个拼接序列元素，目标数字自动应用加粗标签
3. 页面渲染：通过html()方法将构建好的HTML内容插入指定容器，完成序列展示

可选输入校验优化 #

如果需要限制输入范围为0-99，可添加校验逻辑：

$('#getBtn').on("click", function() {
  const target1 = parseInt($('#field1').val(), 10);
  const target2 = parseInt($('#field2').val(), 10);

  // 校验输入是否为0-99之间的有效数字
  if (isNaN(target1) || target1 < 0 || target1 > 99) {
    alert("第一个输入框请输入0-99之间的有效数字");
    return;
  }
  if (isNaN(target2) || target2 < 0 || target2 > 99) {
    alert("第二个输入框请输入0-99之间的有效数字");
    return;
  }

  let sequenceContent = '';
  for (let i = 0; i <= 99; i++) {
    sequenceContent += (i === target1 || i === target2) ? `<strong>${i}</strong> ` : `${i} `;
  }

  $('#sequence').html(sequenceContent.trim());
});

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