Javascript 在JS中循环数组并在引导中为HTML提要生成帖子？
所以我有一个基本的HTML引导网站，就像一个新闻提要一样，我试图用不同的帖子来填充它。在Javascript中，我有一个数组，其中包含不同的图像、标题和字幕，我想用它们来生成新闻提要中的帖子。我的第一个想法是循环遍历数组，为每个帖子生成HTML代码，然后使用Javascript将代码插入提要 然而，我一直在Javascript中使用字符串变量来存储每篇文章的通用HTML代码，并将它们与图像url、标题文本等连接起来，为每篇文章创建代码块。这真的很尴尬，让我觉得必须有一种更有效的方法来为提要中的内容帖子生成代码 有谁知道一种更有效的方法可以通过编程创建帖子来填充这个提要？理想情况下，我将能够避免仅仅手工编写每个帖子的HTML，因为我试图创建的帖子超过50篇，并且我可以控制帖子的顺序，等等 下面是一个HTML的示例Javascript 在JS中循环数组并在引导中为HTML提要生成帖子？,javascript,html,bootstrap-4,feed,Javascript,Html,Bootstrap 4,Feed,所以我有一个基本的HTML引导网站，就像一个新闻提要一样，我试图用不同的帖子来填充它。在Javascript中，我有一个数组，其中包含不同的图像、标题和字幕，我想用它们来生成新闻提要中的帖子。我的第一个想法是循环遍历数组，为每个帖子生成HTML代码，然后使用Javascript将代码插入提要 然而，我一直在Javascript中使用字符串变量来存储每篇文章的通用HTML代码，并将它们与图像url、标题文本等连接起来，为每篇文章创建代码块。这真的很尴尬，让我觉得必须有一种更有效的方法来为提要中的内
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>NewsMe Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
</head>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">NewsMe</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<br></br>
<h2>News Feed</h2>
<!-- <p>Find all the </p> -->
</div>
<a href="https://ibb.co/YjH9b25"></a>
</div>
<div class="row" id="feed">
<div class="col-md-9">
<div class="row mb-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-3">
<img src="http://eskimo.egemenerd.com/wp-content/uploads/2018/05/product14-600x600.jpg">
</div>
<div class="col-md-9">
<div class="card-body">
<div class="news-content">
<a href="#"><h2>Headline 1</h2></a>
<p>Caption 1 </p>
</div>
<div class="news-footer">
<div class="news-author">
<ul class="list-inline list-unstyled">
<li class="list-inline-item text-secondary">
<i class="fa fa-user"></i>
Author
</li>
<li class="list-inline-item text-secondary">
<i class="fa fa-user"></i>
News
</li>
<li class="list-inline-item text-secondary">
<i class="fa fa-eye"></i>
110 Views
</li>
<li class="list-inline-item text-secondary">
<i class="fa fa-calendar"></i>
26 June 2018
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-3">
<img src="http://eskimo.egemenerd.com/wp-content/uploads/2018/05/product14-600x600.jpg">
</div>
<div class="col-md-9">
<div class="card-body">
<div class="news-content">
<a href="#"><h2>Headline 2 </h2></a>
<p>Caption 2</p>
</div>
<div class="news-footer">
<div class="news-author">
<ul class="list-inline list-unstyled">
<li class="list-inline-item text-secondary">
<i class="fa fa-user"></i>
Author
</li>
<li class="list-inline-item text-secondary">
<i class="fa fa-eye"></i>
110 Views
</li>
<li class="list-inline-item text-secondary">
<i class="fa fa-calendar"></i>
26 June 2018
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
</div>
</div>
<!-- <div class="col-md-3">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<img src="http://eskimo.egemenerd.com/wp-content/uploads/2018/05/blog17.jpg">
</div>
</div>
</div>
</div>
</div> -->
</div>
</div>
</body>
</html>
var img_arr = ['image_1.png','image_2.png'];
var headline_arr = ['Headline 1', 'Headline 2'];
var caption_arr = ['Caption 1', 'Caption 2'];
添加jQuery可以很容易 为要渲染的帖子留出空间
<div id="posts">
</div>
<div style="display: none;" id="templates">
<div id='post-template'>
<span id='post-caption'></span>
<span id='post-headline'></span>
<img id='post-image' />
</div>
</div>
let posts = $("#posts");
for (let i = 0; i < caption_arr.length; i++) {
let caption = caption_arr[i];
let headline = headline_arr[i];
let image = img_arr[i];
let postClone = $("#templates #post-template").clone();
postClone.find("#post-caption").text(caption);
postClone.find("#post-headline").text(headline);
postClone.find("#post-image").attr('src', image);
posts.append(postClone);
}
请只添加代码的相关部分。所有样板引导代码都是无关的。
let posts = $("#posts");
for (let i = 0; i < caption_arr.length; i++) {
let caption = caption_arr[i];
let headline = headline_arr[i];
let image = img_arr[i];
let postClone = $("#templates #post-template").clone();
postClone.find("#post-caption").text(caption);
postClone.find("#post-headline").text(headline);
postClone.find("#post-image").attr('src', image);
posts.append(postClone);
}
let img_arr = []
let headline_arr = []
let caption_arr = []
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => response.json())
.then(data => {
headline_arr = data.map(p => p.title)
caption_arr = data.map(p => p.body)
})
fetch("https://jsonplaceholder.typicode.com/photos")
.then(response => response.json())
.then(data => {
caption_arr = data.map(p => p.thumbnailUrl)
})