如何使所有页面中包含的可重用导航栏的文本内容反映

Question

我在多个页面上包含了一个可重复使用的导航栏，它工作正常，但是当我尝试更改同一导航栏上单词的 textContent 时，即使我已经声明了该变量，它也显示未定义。 我哪里不对？

我希望将 id first_name 的跨度更改为数组中data.first_name的名称，并且我希望它反映在每个页面上。

$(function() {
  $("#nav-placeholder").load("navbar.html");
  var first_name = document.getElementById("first_name");
  var data = [{
    "first_name": "Chibuogwu"
  }]

  first_name.innerHTML = data.first_name;

});

<div class="content-side content-side-full text-center bg-black-10">
  <div class="smini-hide">
    <img class="img-avatar" src="assets/media/photos/avatar0.jpg" alt="">
    <div class="mt-2 mb-1 font-w600">
      <span id="first_name"> User</span></div>

  </div>
</div>

Answer 1

使用 jQuery 时，请使用 jQuery

负载也是异步的，数据是一个数组

const data = [{
    "first_name": "Chibuogwu"
  }]

$(function() {
  $("#nav-placeholder").load("navbar.html",function() {
    $("#first_name").html(data[0].first_name);
  });
});  

Answer 2

data 是一个数组，因此应该首先访问它。 请检查以下：

 first_name.innerHTML = data[0].first_name;