时间戳

首页 > 解决方案 > 在 JS 中循环遍历数组并在引导程序中为 HTML 提要生成帖子？

javascript - 在 JS 中循环遍历数组并在引导程序中为 HTML 提要生成帖子？

问题描述

因此，我在 HTML 中设置了一个基本的 Bootstrap 网站，就像新闻提要一样，我正在尝试用不同的帖子填充它。在 Javascript 中，我有包含不同图像、标题和说明文字的数组，我想使用这些数组在新闻提要中生成帖子。<div>我的第一个想法是循环遍历数组并为每个帖子生成 HTML 代码，然后使用 Javascript 将该代码插入到提要中。

但是，我一直在 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'];

标签： javascripthtmlbootstrap-4feed

解决方案

添加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 中循环您的对象以克隆模板并将它们附加到帖子 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);
}

推荐阅读