通过JS中的数组循环并在引导程序中为HTML feed生成帖子？

问题描述 投票：-1回答：2

所以我有一个基本的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'];
javascript html bootstrap-4 feed
2个回答
1
投票

添加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); }
0
投票
您可以使用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) })

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.