【发布时间】：2019-02-10 18:55:23
【问题描述】：
我对 JavaScript 比较陌生，所以我不确定我在这里做的事情是否传统，是否有更好的方法来做我想做的事情。
我有一个 JavaScript 函数，它从 JSON 文档中提取大约 3,600 个句子，并将它们自动插入到我的 HTML 代码中。在 HTML 中为每一次生成一个唯一的 id。
我想为每个句子创建一个 onclick 事件，以便在单击它时在该句子下方显示更多信息。这意味着我必须声明数千个变量，一个用于每个句子，一个用于与该句子关联的每个信息 div：
var sent1 = document.getElementById('s1');
var sent1info = document.getElementById('s1info');
var sent2 = document.getElementById('s2');
var sent2info = document.getElementById('s2info');
var sent3 = document.getElementById('s3');
var sent3info = document.getElementById('s3info');
...
手动操作太多了。有没有办法自动化声明这些变量的过程，或者有更好的方法来做我正在做的事情？
对于上下文，我对每个变量的意图是将其输入到这个函数中：
sent1.onclick = function(){
if(sent1info.className == 'open'){
sent1info.className = 'close';
} else{
sent1info.className = 'close';
}
};
从这里开始，当 className 为 'close' 时，CSS 会将信息框缩小到 0 的高度，并在 className 为 'open' 时展开它。但是，同样，这将需要我写出这个函数数千次。
有没有办法自动执行此操作？还是我做错了？
编辑以显示 HTML：
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<div id="everything">
<header id="theheader" class="clearfix">...</header>
<div id="thebody" class="box clearfix">
<aside id="page" class="side">...</aside>
<div class="items">
<article id="content" class="article">
<img id="sentpic" src="sentpic.jpg">
<h1>Sentences</h1>
<div id="sentences">
*** This is where the JS inserts sentences and information ***
<ul id='sent1' class='sentcontent'><li class='number'>1.</li><li class='thesent'>...</li></ul>
<div id='sent1info' class='infobox'>
<ul class='sentinfo'><li class='information'>Info:</li><li class='infotext'><em>...</em></li></ul>
<ul class='sentinfo'><li class='information'>Line:</li><li class='line'>...</li></ul>
</div>
<ul id='sent2' class='sentcontent'><li class='number'>2.</li><li class='thesent'>...</li></ul>"
<div id='sent2info' class='infobox'>
<ul class='sentinfo'><li class='information'>Info:</li><li class='infotext'><em>...</em></li></ul>
<ul class='sentinfo'><li class='information'>Line:</li><li class='line'>...</li></ul>
</div>
*** it goes on like this for each sent inserted ***
</div>
</article>
</div>
</div>
<div class="associates clearfix">...</div>
<footer class="foot">...</footer>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
【问题讨论】：
-
为什么不使用 forEach 或 for 循环？
-
只需将具有共同类的元素索引到句子数组中的索引即可。展示如何从数据中生成 html
-
这将有助于查看创建的 HTML 结构。例如：句子和细节是否在同一个父级中？它们在页面的其他地方吗？另外，生成这个样子的函数是什么？如果您编辑问题以包含这些内容，您可能会得到更好的答案。
-
您能否展示一下您当前使用的 HTML 片段？
标签： javascript html css json