个人中心
gpt4 book ai didi

javascript - 如何将此 JSON 文件中的图像正确附加到正确的 div 中

转载 作者：行者123 更新时间：2023-11-28 16:48:30 24 4
gpt4 key购买 nike

我正在制作一个 Instagram 网页克隆，并且我已经构建了所有内容。我可以从 JSON 文件中检索数据并将其添加到 <img>标签，但我需要每张图片都显示在它自己的 .below-image 版本之上分区我知道我需要以某种方式附加 .below-image放入 #images 中的每个图像部分div，我已经做到了，但无论出于何种原因，我似乎无法弄清楚如何分离每个图像，以便每个元素之间有一致的间距。

我还创建了一个 https://jsbin.com/zagejacowe/edit?output

HTML

<html>

  <head>
    <meta charset="UTF-8">
    <title>Instagram Feed</title>
    <link rel="stylesheet" href="feedstyle.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type='text/javascript' src='feed.js'></script>

  </head>

  <body>

    <header>
      <div class="top">
        <!-- <div id="home-button">
          <i class="fa fa-home fa-2x"></i>
        </div>
        <div id="logo">
          <img src="http://i.imgur.com/SmdPZ6T.png" />
        </div>
        <div id="profile-photo">
          <img src="https://scontent-sea1-1.cdninstagram.com/hphotos-xaf1/t51.2885-19/10731946_1517235648523785_1216221661_a.jpg" />
        </div> -->
        <ul>
          <li><i class="fa fa-home fa-2x"></i></li>
          <li id="logo">
            <img src="http://i.imgur.com/SmdPZ6T.png" />
          </li>
          <li id="profile-photo">
            <img src="https://scontent-sea1-1.cdninstagram.com/hphotos-xaf1/t51.2885-19/10731946_1517235648523785_1216221661_a.jpg" />
            <p class="username">username</p>
          </li>
        </ul>

      </div>
    </header>


    <div id="container">
      <main>
        <div id="feed-container">
          <div id="feed-posts">
            <div id="images">
              <!-- <ul>
                <li>
                  <img src="http://yourbizrules.com/wp-content/uploads/2014/08/Staying-Motivated.jpg" />
                </li>
                <div class="below-image">
                  <div class="like">
                    <i class="fa fa-heart fa-2x"></i>
                  </div>
                  <div class="image-info">
                    <p>User Info</p>
                  </div>
                  <div class="more">
                    <button>···</button>
                  </div>
                  <div id="clear"></div>
              </ul>
              <div id="add-a-comment">
                <div class="comment-container">
                  <form class="comment" action="index.html" method="post">
                    <input type="text" name="name" value="" placeholder="Add a comment...">
                  </form>
                </div>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </main>
  </div>
</body>
</html>

CSS

* {
  margin: 0px;
  padding: 0px;
}
body {
  font-family: "proxima-nova", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
ul {
  list-style: none;
}
li {
  list-style: none;
}
#container {
  margin: 0 auto;
  display: block;
}
header {
  margin: 0 auto;
  display: block;
  background-color: #3E6D93;
  height: 50px;
}
.top {
  background: #467ea6;
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.01, #467ea6), to(#27608c));
  background: -webkit-linear-gradient(#467ea6 1%, #27608c 100%);
  background: -moz-linear-gradient(#467ea6 1%, #27608c 100%);
  background: -o-linear-gradient(#467ea6 1%, #27608c 100%);
  background: linear-gradient(#467ea6 1%, #27608c 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#467ea6', endColorstr='#27608c', GradientType=0);
  width: 100%;
}
.top li {
  display: inline-block;
  margin: 0 auto;
}
#home-button, .fa-home {
  float: left;
  background-color: #305F87;
  color: #ccc;
  padding: 7px;
  margin-left: 200px;
  width: 35px;
}
.fa-home {
  padding-left: 12px;
}
#logo img {
  float: right;
  width: 110px;
  margin-left: 400px;
  padding: 6px;
}
#profile-photo  {
  float: right;
  margin-right: 200px;
  padding: 10px;
  border-left: 1px solid #305F87;
  border-right: 1px solid #305F87;
  width: auto;
}
#profile-photo img  {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}
#profile-photo p {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  float: right;
  margin-left: 10px;
  padding: 5px;

}
#feed-container {
  background-color: #DFDFDF;
  width: 650px;
  height: auto;
  margin: 0 auto;
  display: block;
}
#feed-posts {}
#images {
  margin: 0 auto;
  display: block;
}
#images img {
  margin: 0 auto;
  display: block;
  width: 550px;
  height: 550px;
}
.below-image {
  margin: 0 auto;
  display: block;
  width: 550px;
  height: 52px;
  background-color: #fff;
  border: 1px solid #ccc;
}
.like {
  float: left;
}
.fa-heart {
  color: #5a5a5a;
  padding: 10px;
  border-right: 1px solid #ccc;
}
.image-info {
  float: left;
  text-align: left;
  width: 437px;
  height: 52px;
  border-right: 1px solid #ccc;
}
.image-info p {
  color: #467ea6;
  font-weight: bold;
  padding-top: 15px;
  padding-left: 20px;
  float: left;
}
.more {
  float: right;
  color: #5a5a5a;
}
.more, button {
  display: inline-block;
  font-size: 45px;
  color: #5a5a5a;
  padding: 0 5px;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
}
#clear {
  clear: both;
}
.comment-container {
  width: 550px;
  height: 200px;

}

#add-a-comment {
  margin: 0 auto;
  display: block;
  background-color: #fff;
  width: 550px;
  height: auto;
  margin-bottom: 50px;
}
#add-a-comment p {
  margin: 0 auto;
  display: block;
}
#add-a-comment input[type=text] {
  width: 550px;
  border: 1px solid #ccc;
  color: #4f4f4f;
  font-size: 16px;
  border: 0;
  bottom: 40px;
  padding: 15px;
  outline: none;
}
input, select, textarea{
  color: #f00;
}

JQUERY

 var bottom =    '<div class="below-image">' +
                '<div class="like">' +
                  '<i class="fa fa-heart fa-2x"></i>' +
                '</div>' +
                '<div class="image-info">' +
                  '<p>User Info</p>' +
                '</div>' +
                '<div class="more">' +
                  '<button>···</button>' +
                '</div>' +
                '<div id="clear"></div>' +
              '</ul>' +
                '<div id="add-a-comment">' +
                  '<div class="comment-container">' +
                    '<form class="comment" action="index.html" method="post">' +
                      '<input type="text" name="name" value="" placeholder="Add a comment...">' +
                    '</form>' +
                  '</div>' +
                '</div>' +
              '</div>';



$(document).ready(function() {
  var jsonURL = "https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json";
  $.getJSON(jsonURL, function(json) {
    var imgList = "";
    //var newImage = "http://yourbizrules.com/wp-content/uploads/2014/08/Staying-Motivated.jpg";

    $.each(json, function() {
      imgList += '<li><img class="inserted" src= " ' + this + ' "></li>' + bottom; 
    });
    $('#images').append(imgList);
  });
});

最佳答案

如果将 foreach 循环更改为这个循环，它应该可以工作:

$.each(json, function(i) {
  imgList += '<ul><li><img class="inserted" src= " ' + json[i] + ' "></li>' + bottom; 
});

此处为 jsfiddle(+更新):http://jsfiddle.net/bg3x0k7n/1/

关于javascript - 如何将此 JSON 文件中的图像正确附加到正确的 div 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32879724/

24 4 0
文章推荐： python中的PHP空函数
文章推荐： python - python中带有提交按钮的输入字段？
文章推荐： css - 垂直对齐 CheckboxTableCell 的复选框
文章推荐： python - Tkinter 动态更改文本框中重复字符串的文本颜色
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com