Question

我有一个div元素，其内容由导入的js文件决定。之前我曾经有两个不同的html页面用于两个div，因此我为每个页面创建了两个js文件（将根据页面要求设置内容）。现在我想将它们放在一个可滚动的html页面中。

是否可以为div1和div2（类似下面的代码）运行两个单独的js文件，这些文件设置了div id的内容：foo？

我更喜欢不更改div id名称foo，因为实际代码包含许多元素，就像模板一样。

＆＃13;

document.getElementById('foo').innerHTML = "content 1";
document.getElementById('foo').innerHTML = "content 2";

＆＃13;

<div id="div1">
  <div id="foo">
  </div>
</div>

<div id="div2">
  <div id="foo">
  </div>
</div>

＆＃13;

Answer 1

您有两个具有相同身份foo的div。我需要独一无二。只需更改其中一个ID，它应该可以正常工作。

<div id="div1">
    <div id="foo"></div>
</div>
<script type="text/javascript"> /// script 1 running for div1
     document.getElementById('foo').innerHTML = "content 1"; 
</script>

<div id="div2">
    <div id="foo1"></div> <!-- CHANGED HERE -->
</div>
<script type="text/javascript"> /// script 2 running for div2
     document.getElementById('foo1').innerHTML = "content 2"; /* AND HERE */
</script>

Answer 2

有时我必须这样做，因为html模板是由第三方生成的。

我使用函数来找到正确的div：

function findthecorrectdiv(parentid,thecorrectdivid)
{
 var thecorrectdiv=document.getElementById(thecorrectdivid);
 var parent=thecorrectdiv?thecorrectdiv.parentNode:{};
 return(parent.id&&parent.id===parentid)?thecorrectdiv:{};
}

然后得到正确的div并填充其中很棒的内容：

var thecorrectdiv;
thecorrectdiv=findthecorrectdiv('div1','foo');
thecorrectdiv.innerHtml='awesome content 1';

thecorrectdiv=findthecorrectdiv('div2','foo');
thecorrectdiv.innerHtml='awesome content 2';

你可能会把它放在一个循环中 - 在循环开始之前声明var thecorrectdiv。

希望这有帮助。

在同一个html文件中为两个不同的同名div运行两个不同的js文件

2 个答案: