JavaScript循环第二次执行失效问题求助

我一眼就瞅出问题所在了——你从输入框里拿到的initial和last是字符串类型，不是数字类型！这就是为啥第一次能用、第二次直接罢工的核心原因。

为啥第一次看似正常？ #

当你输入1到10的时候，字符串比较"1" <= "10"刚好能生效（字符串是按字符逐个对比的，"1"和"10"的第一个字符都是"1"，"1"没后续字符，会被判定小于"10"），所以循环能正常跑。但第二次输入比如11到20时就完全不一样了：

• 初始i是字符串"11"
• 执行i++后，字符串会直接拼接成"111"（而不是你预期的数字12）
• 这时候判断"111" <= "20"，字符串对比第一个字符"1" < "2"，条件直接不成立，循环直接终止，自然啥操作都没执行。

修复方案 #

把获取到的输入值转成整数类型就行，用parseInt()（记得加上第二个参数10，表示十进制解析）或者Number()都可以。另外最好加个输入验证，避免用户输入非数字或者起始值大于结束值的情况：

修改后的JavaScript代码：

function callAssignMark() {
 var rightMarkVal = $("#rightMarkVal").val();
 var wrongMarkVal = $("#wrongMarkVal").val();
 // 转成整数类型，第二个参数10确保是十进制解析
 var initial= parseInt($("#from").val(), 10);
 var last= parseInt($("#to").val(), 10);

 // 新增输入验证，避免无效输入
 if (isNaN(initial) || isNaN(last) || initial > last) {
    alert("请输入有效的数字范围，起始值不能大于结束值哦！");
    return;
 }

 console.log('fromWhere--'+initial);
 console.log('to---'+last);
 alert('Before Loop');
 for (var i = initial; i <= last; i++) {
 $('#rightMark_' + i ).val(rightMarkVal);
 $('#wrongMark_' + i ).val(wrongMarkVal);
 $('#selectData_' + i).prop('checked', true); // 用布尔值设置选中状态更规范
 }
 $("#from").val('');
 $("#to").val('');
}

额外小优化 #

设置复选框选中状态时，用.prop('checked', true)比.prop('checked', 'checked')更符合jQuery的规范，布尔值的语义也更清晰。

内容的提问来源于stack exchange，提问作者Created By lucky