时间戳

首页 > 解决方案 > 在多个 html 文件上使用 innerHTML/innerText 打印变量

javascript - 在多个 html 文件上使用 innerHTML/innerText 打印变量

问题描述

所以我有超过 1 个 html 文件，每个文件中都有一个像 <p> 这样的元素，id:'level1' 所以```<p id="level1"></p>

在一个 js 文件文件上，我有：

var level1 = {
   name: 'Hello',
   author: 'me',
   id: '1'
}

然后我用innerText将这些信息写在html页面上，但我也尝试了innerHTML和TextContent

document.getElementById('level1').innerText = level1.name;

以及所有其他名称，但我在所有文件中只看到第一个 var 信息，但我还有其他 var，例如 level2 level3，它们以相同的方式打印，但其他仅显示在一个 html 文件上

在我的代码上，我有：

索引.html

<!-- #1 -->
    <div class="table">
        <a href=""><img class="thumb" onclick="video1x1()" src="images/img1.jpg" width="16%" height="80%"></a>
        <a href="list/1"><p class="p1" id="level1"></p></a>
        <p class="author" id="author1"></p>
     </div>
<!----->

在另一个 html 文件上：

1.html

<p class="title" id="level1"></p><a href="../2"><p class="ttitle">></p>

这适用于 level1 var idk 为什么，但对于其他人没有。

基本上我希望它在每个具有 id="level1" 的元素上写成 level1.name

标签： javascripthtmlinnerhtmlinnertext

解决方案

使用当前的 javascript 变量格式，为正确的元素轻松选择正确的值有点麻烦 - 但您可以执行以下操作：

var level1 = {
    name: 'Hello',
    author: 'me',
    id:1
}
var level2 = {
    name: 'Goodbye',
    author: 'you',
    id:2
}



// find all the elements that have an ID beginning with "level" 
document.querySelectorAll('[id^="level"]').forEach( ( el, i )=>{
  
  // to refer to the numbered variable define it as a property of the window
  let obj=window[ 'level'+( i + 1 ) ];
  
  if( obj ){
      // find the number from the HTML element
      let a=el.id.match(/\d/);
      
      // if the current HTML element index (+1) matches the number above....
      if( a==(i + 1) ){
        // change the content of the element
        el.innerHTML=obj.name;
        el.parentNode.parentNode.querySelector( 'p.author' ).innerHTML=obj.author;
      }
  }
});
<div class="table">
    <a href=""><img class="thumb" onclick="video1x1()" src="images/img1.jpg" width="16%" height="80%"></a>
    <a href="list/1"><p class="p1" id="level1"></p></a>
    <p class="author" id="author1"></p>
</div>
 
<div class="table">
    <a href=""><img class="thumb" onclick="video1x1()" src="images/img2.jpg" width="16%" height="80%"></a>
    <a href="list/2"><p class="p2" id="level2"></p></a>
    <p class="author" id="author2"></p>
</div>

如果将 JS 变量压缩为单个变量会更容易，而 JSON 将是一个很好的选择。这将使匹配的代码更简单、更健壮。

IE：

var levels={
    1:{name:'Hello',author:'me'},
    2:{name:'Goodbye',author:'you'}
};

诚然，上面的 JSON 是无效的——它是一个 Object 文字，但你明白了。如果这是您在幕后最初用来创建变量的内容，那么从数据库生成此类内容很容易

var levels={
    1:{name:'Hello',author:'me'},
    2:{name:'Goodbye',author:'you'}
};


Object.keys( levels ).forEach( i=>{
    let obj=levels[ i ];
    let name=document.querySelector('[id="level'+i+'"]');
    let author=document.querySelector('[id="author'+i+'"]');
    
    if( name )name.innerHTML=obj.name;
    if( author )author.innerHTML=obj.author;
})
<div class="table">
    <a href=""><img class="thumb" onclick="video1x1()" src="images/img1.jpg" width="16%" height="80%"></a>
    <a href="list/1"><p class="p1" id="level1"></p></a>
    <p class="author" id="author1"></p>
</div>
 
<div class="table">
    <a href=""><img class="thumb" onclick="video1x1()" src="images/img2.jpg" width="16%" height="80%"></a>
    <a href="list/2"><p class="p2" id="level2"></p></a>
    <p class="author" id="author2"></p>
</div>

推荐阅读