我在多个页面上包含了一个可重复使用的导航栏,它工作正常,但是当我尝试更改同一导航栏上单词的 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>

#1楼 票数:1 已采纳

使用 jQuery 时,请使用 jQuery

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

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

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

#2楼 票数:0

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

 first_name.innerHTML = data[0].first_name;

  ask by chibuogwu translate from so

未解决问题?本站智能推荐:

1回复

导航栏中包含的页面内容

第一个输出: https : //ibb.co/k2RJ1m6 我需要实现的目标: https : //ibb.co/86nhB6m 页面内容是 X 标记和工具栏。 但它不是像第二张图片那样在外面,而是被包含在侧边栏中。 这是代码
2回复

无法使我的导航栏适合所有页面

在我的导航栏中,我有5页,首页,关于我们,最近通过,地区,联系方式 接触似乎在下面。 我曾尝试使字体变小,但我仍然没有任何幸运能有人请我帮忙。 这是网站预览的链接-http: //leetaxi.webuda.com/index.html 非常感谢
2回复

使Bootsrap导航栏中的文本响应

昨天我问了这个问题,关于如何根据布局将导航栏菜单从水平更改为垂直堆叠,但是现在我注意到,当我使文本适合大型显示器时,将窗口缩小时它不起作用。 有什么办法可以使我的文字更具响应性? 如果没有,您还有其他菜单方法吗? 另外,水平时如何将菜单按钮居中? 我的JSFiddle 我的CSS
3回复

如何使导航栏随页面滚动?

如何使导航栏与页面一起向下滚动? 我在这里找到了一些答案,但是由于我的导航栏的代码在另一个文件中而使我很难受,我只使用了<?php include ("includes/navbar.php"); ?> <?php include ("includes/navbar.php
5回复

使导航栏占用css中的整个页面高度

我正在使用css和html设计一个网站。 我已经设法使用此css在我的页面左侧获得了一个导航栏,但是当屏幕向下滚动时,导航栏不再继续。 但是,我想使导航栏的高度为文档的高度。 我觉得我可能需要java脚本,但是我不熟悉java脚本,所以我不知道如何实现这一目标。 我认为高度100%将占
2回复

如何使用CSS和JS在不同的.html页面上重用导航栏?

我总共有 3 个页面: index.html 、 sketch.html和user-profile.html 。 他们都有相同的导航栏(我现在只是复制并粘贴了nav元素),但我现在意识到这不是最好的主意。 导航栏在屏幕上的位置 (HTML)、样式 (CSS) 以及登录和注册功能 (Javascrip
7回复

在多个页面上为导航栏创建可重用的html

我认为拥有可重复使用的代码会很方便,特别是对于导航栏,因为它在我的所有页面中都是相同的。 这样,我就不必浏览每个页面,并在发生更改时单独手动编辑每个页面。 似乎有可能使用iframe,但我尝试了它,整个页面样式出了问题。 我可以解决它,但我想知道是否有类似的东西。 如果像这样的东西可
3回复

如何根据页面滚动使固定的导航栏透明?

我希望mynavbar在页面滚动到顶部时是透明的,但是当用户滚动时,我希望它变得不透明。 我使用javascript进行了尝试,但是仍然无法正常工作。 http://jsfiddle.net/6A6qy/ function myFunction() { if ($(window).s