从带有Uniqqe Id的段落数组中添加句子's

Adding Sentences From Paragraph Array With Uniqqe Id's

本文关键字：句子 添加 数组 Uniqqe Id 段落      更新时间：2024-04-08

我正在写一个脚本，它将一本书作为一组句子。我想把每个句子打印出来，然后让每个句子都可以点击。现在，我让它打印每个句子，但当我试图为每个句子添加一个带有它自己唯一id的

元素时，它不起作用。这是我的jsfidde：http://jsfiddle.net/mvvq8L7p/

相关代码片段。

var IdCounter = 0;
for (var i = 0, len = book_sentences.length; i < len; i++) {
   IdCounter++;
   document.getElementById("pageOfBook").innerHTML = "<p class='sentence' id='sentence#" + IdCounter + "'>" + book_sentences[i] + "</p>";
}

有人能解释为什么会发生这种情况以及如何使其发挥作用吗？提前谢谢，我真的很感激你的帮助！

只需用'.'分隔段落，并使用IDCounter/将其附加到您的div

    var book = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
var book_sentences = book.split('.');
IdCounter = 0;
book_sentences.forEach(function(data){
IdCounter = IdCounter + 1;
    console.log(data);
document.getElementById("pageOfBook").innerHTML += "<p class='sentence' id='sentence#" + IdCounter + "'>" + data + ".</p>";
});
<div id="pageOfBook"></div>

相关文章：