通过JS中的数组循环并在引导程序中为HTML feed生成帖子？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过JS中的数组循环并在引导程序中为HTML feed生成帖子？相关的知识，希望对你有一定的参考价值。
所以我有一个基本的html启动Bootstrap网站，就像新闻订阅源一样，我正在尝试用不同的帖子填充它。在javascript中，我要使用包含不同图像，标题和标题的数组，以用于在新闻提要中生成帖子。我的第一个想法是循环遍历数组并为每个帖子生成HTML代码，然后使用Javascript将该代码插入到提要<div>中。
但是，我一直在Javascript中使用字符串变量来存储每个帖子的通用HTML代码，并将它们与图像url，标题文本等串联起来，以为每个帖子创建代码块。这确实很尴尬，使我认为必须有一种更有效的方式来为提要中的内容帖子生成代码。
有人知道以编程方式创建帖子以填充此供稿的更有效方法吗？理想情况下，我可以避免只为每个帖子手动编写HTML（我尝试创建50个以上的帖子），并且可以对帖子的顺序进行一些控制，等等。
这里是HTML的示例
<!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>
CSS：
body {
padding: 0;
margin: 0;
background: #e2e5ee;
font-family: "Segoe UI";
}
/*--- navigation bar ---*/
.navbar {
background:#4e4764;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}
img {width:100%;}
Javascript：
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>
将JavaScript中的对象放在[
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);
}
另一答案
您可以使用placeholder API来获取虚假信息或其他内容。>>使用您的代码结构的工作示例：
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)
})
以上是关于通过JS中的数组循环并在引导程序中为HTML feed生成帖子？的主要内容，如果未能解决你的问题，请参考以下文章
创建数组X，并在python中为数组Y中的每个元素提供一定数量的副本
03JavaScript程序设计修炼之道 2019-06-04_fe-js-044es6解构赋值之数组解构_2019-06-06_20-10-17 解构赋值数组排序法