Javascript 引号索引器答案

【问题标题】：Javascript quotes indexerJavascript 引号索引器
【发布时间】：2020-12-25 13:42:48
【问题描述】：

我创建了一个 Javascript，因此如果我在下面的脚本中添加引号，它应该放在 element 中。

const quotes = [
  { quotes: 'Be yourself; everyone else is already taken' },
  { quotes: 'So Many Books, So Little Time' },
  { quotes: "Strangers think I'm Quiet. My Friends think I'm outgoing. My best friends know that I'm Completely Insane" },
  { quotes: 'A room without books is like a body without soul' },
  { quotes: 'You only live once, but if you do it right, once is enough' },
];
function quoteindexer() {
  quotesView.innerHTML = quotes[i].quotes;
}

我的html代码

<p class="quotes" id="quoteindexer"></p>

但我需要将所有引号显示在不同的  元素本身中。也就是说，引号的数量应该等于创建的 的数量。我是 Javascript 新手，所以请帮助我。

【问题讨论】：

标签： javascript html dom-events dynamic-html

【解决方案1】：

您需要仔细阅读每个引用并为其创建一个段落：

const quotes = [
    { quotes: 'Be yourself; everyone else is already taken' },
    { quotes: 'So Many Books, So Little Time' },
    { quotes: "Strangers think I'm Quiet. My Friends think I'm outgoing. My best friends know that I'm Completely Insane" },
    { quotes: 'A room without books is like a body without soul' },
    { quotes: 'You only live once, but if you do it right, once is enough' },
];

var quotesHtml = quotes.map(function(q) {
    return '<p class="quotes">'+ q.quotes +'</p>'
}).join('\n');

function quoteindexer() {
    quotesView.innerHTML = quotesHtml;
}

【讨论】：

我们需要在 .join() 中传入 '\n' 吗？我们不能只使用 .join('') 吗？
当然不需要，如果您要阅读 html，只需将每个
放在新行中

【解决方案2】：

var quotes = [
      { quotes: 'Be yourself; everyone else is already taken' },
      { quotes: 'So Many Books, So Little Time' },
      { quotes: "Strangers think I'm Quiet. My Friends think I'm outgoing. My best friends know that I'm Completely Insane" },
      { quotes: 'A room without books is like a body without soul' },
      { quotes: 'You only live once, but if you do it right, once is enough' }
    ];
    function quoteindexer(arrayQ) {
      let quotesView = document.getElementById('quotesView'); //target your container
      for(var j in arrayQ){
     
         //pass quotes into the container
        quotesView.innerHTML +='<p class="quotes">'; 
        quotesView.innerHTML += quotes[j].quotes;
        quotesView.innerHTML += '</p>';
      }
      
    }
    //
    quoteindexer(quotes);

<div id='quotesView'></div>
<style>
.quotes{
 background: #dde;
 border-radius: 5px;
 padding: 5px;
 margin: 3px;
}

</style>

看看这个

&lt;div id="quotesView"&gt;&lt;/div&gt;

【讨论】：

它只显示一个报价。我需要在单独的
中显示所有引号，而无需实际编写 html 代码
我是否必须将
放在给定的 div 中
你所有的引用都会在这里输入
我认为代码有问题。它不显示任何内容！
是的，我已经修好了

【解决方案3】：

Simpy 使用 Array.map() 方法。示例：

const quotes = [
  { quotes: 'Be yourself; everyone else is already taken' },
  { quotes: 'So Many Books, So Little Time' },
  { quotes: "Strangers think I'm Quiet. My Friends think I'm outgoing. My best friends know that I'm Completely Insane" },
  { quotes: 'A room without books is like a body without soul' },
  { quotes: 'You only live once, but if you do it right, once is enough' }
]

let container = document.getElementById("myQuotes")

let Allquotes = quotes.map(myquote =>{
 return `<p>${myquote.quotes}</p> \n`
  
})
container.innerHTML = Allquotes

<div id="myQuotes">

</div>

【讨论】：

虽然它有效，但它在每个引号后显示一个 quoma (" , " )。请解决。
任何人帮助我。