我需要将 JavaScript 数组转换为 html 并将其显示在我的 JS 代码的 div 元素中
js
$(document).ready(function(){
$("#getQuotes").on("click", function(){
var index = Math.floor(Math.random() * (quotes.length));
var html = "<h6> " + quotes[index].author + "</h6> <br>";
html = "<h1>" + quotes[index].quote + "</h1>";
$("#display").html(html);
});
});
// Js object of some famous quotes
var quotes = [
{
"quote": "Once you eliminate the impossible, whatever remains, no matter how improbable, must be the truth.",
"author": "—Sherlock Holmes"
},
{
"quote" : "You can do anything, but not everything.",
"author" : "—David Allen"
},
{
"quote" : "Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.",
"author" : "—Antoine de Saint-Exupéry"
},
{
"quote" : "The richest man is not he who has the most, but he who needs the least.",
"author" : "—Unknown Author"
},
{
"quote" : "You miss 100 percent of the shots you never take.",
"author" : "—Wayne Gretzky"
},
{
"quote" : " Courage is not the absence of fear, but rather the judgement that something else is more important than fear.",
"author" : "—Ambrose Redmoon"
},
{
"quote" : "You must be the change you wish to see in the world.",
"author" : "—Gandhi"
},
{
"quote" : " To the man who only has a hammer, everything he encounters begins to look like a nail.",
"author" : "—Abraham Maslow"
},
{
"quote" : "We are what we repeatedly do; excellence, then, is not an act but a habit.",
"author" : "—Aristotle"
},
{
"quote" : "Do not seek to follow in the footsteps of the men of old; seek what they sought.",
"author" : "—Basho"
},
{
"quote" : "A wise man gets more use from his enemies than a fool from his friends.",
"author" : "—Baltasar Gracian"
},
{
"quote" : "Always forgive your enemies; nothing annoys them so much.",
"author" : "—Oscar Wilde"
}
];
最佳答案
替代+=
=
的运算符终于找到了运算符(operator) html
连接赋值 "<h1>" + quotes[index].quote + "</h1>"
而不是覆盖html
变量
$(document).ready(function(){
$("#getQuotes").on("click", function(){
var index = Math.floor(Math.random() * (quotes.length));
var html = "<h6> " + quotes[index].author + "</h6> <br>";
html += "<h1>" + quotes[index].quote + "</h1>";
$("#display").html(html);
});
});
// Js object of some famous quotes
var quotes = [
{
"quote": "Once you eliminate the impossible, whatever remains, no matter how improbable, must be the truth.",
"author": "—Sherlock Holmes"
},
{
"quote" : "You can do anything, but not everything.",
"author" : "—David Allen"
},
{
"quote" : "Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.",
"author" : "—Antoine de Saint-Exupéry"
},
{
"quote" : "The richest man is not he who has the most, but he who needs the least.",
"author" : "—Unknown Author"
},
{
"quote" : "You miss 100 percent of the shots you never take.",
"author" : "—Wayne Gretzky"
},
{
"quote" : " Courage is not the absence of fear, but rather the judgement that something else is more important than fear.",
"author" : "—Ambrose Redmoon"
},
{
"quote" : "You must be the change you wish to see in the world.",
"author" : "—Gandhi"
},
{
"quote" : " To the man who only has a hammer, everything he encounters begins to look like a nail.",
"author" : "—Abraham Maslow"
},
{
"quote" : "We are what we repeatedly do; excellence, then, is not an act but a habit.",
"author" : "—Aristotle"
},
{
"quote" : "Do not seek to follow in the footsteps of the men of old; seek what they sought.",
"author" : "—Basho"
},
{
"quote" : "A wise man gets more use from his enemies than a fool from his friends.",
"author" : "—Baltasar Gracian"
},
{
"quote" : "Always forgive your enemies; nothing annoys them so much.",
"author" : "—Oscar Wilde"
}
];
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="getQuotes">get quotes</div>
<div id="display"></div>
关于javascript - 将 JavaScript 对象转换为 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38423777/