使用JavaScript动态填充li标签：第二个对象数据无法渲染

嘿，我帮你找到了两个导致第二个对象数据无法正常显示的关键问题，咱们一步步拆解：

1. 变量名冲突（核心问题） #

你在第一个$.each的回调函数里用了value作为参数，这会直接覆盖全局定义的const value成绩对象！

JavaScript中函数参数的作用域优先级高于外层全局变量，所以当你在第二个遍历里尝试访问value[index]时，这里的value已经不是你定义的{0: "90%", ...}对象了，而是第一个遍历里的学科名称（比如字符串"Mathematics"）。用字符串的[index]只会取单个字符，自然无法显示正确的成绩数据。

2. HTML语法错误 #

你的card-body标签存在语法问题：

<div class="card-body id="packageBenefits">

这里class属性结束后没有添加闭合引号，会导致DOM选择器无法正确定位到#packageBenefits元素，间接影响数据渲染。

修正后的完整代码 #

HTML部分（修复语法错误） #

<div class="card">
  <div class="card-header">All subjects</div>
  <div class="card-body" id="packageBenefits">
    <ul>
      <li>Subject <span></span></li>
      <li>Subject <span></span></li>
      <li>Subject <span></span></li>
      <li>Subject <span></span></li>
    </ul>
  </div>
</div>

JavaScript部分（解决变量冲突，优化逻辑） #

// 第一个对象
const subject = { 0: "Mathematics", 1: "English", 2: "Swahili", 3: "Science" };
// 第二个对象
const scores = { 0: "90%", 1: "70%", 2: "50%", 3: "85%" }; // 把变量名改成scores，彻底避免冲突

// 遍历第一个对象的逻辑 - 回调参数改用subjectName
const $listItems = $("#packageBenefits ul li");
$.each(subject, function (key, subjectName) { 
  $listItems.eq(key).text(`Subject: ${subjectName}`); 
});

// 遍历第二个对象的逻辑 - 现在scores是正确的成绩对象
$('#packageBenefits ul li > span').each(function(index) { 
  $(this).text(scores[index]); 
});

额外优化建议（合并遍历，提升性能） #

你可以把两个遍历合并成一次，减少DOM操作次数：

$.each(subject, function(key, subjectName) {
  const $item = $listItems.eq(key);
  $item.text(`Subject: ${subjectName}`);
  $item.find('span').text(scores[key]);
});

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