个人中心
gpt4 book ai didi

javascript - 如何通过 JSON GET 请求将输入中的文本附加到单个元素？

转载 作者：太空宇宙 更新时间：2023-11-04 11:19:20 26 4
gpt4 key购买 nike

我已经创建并克隆了 Instagram，但在向个人添加评论时遇到了一些问题 <div>元素。我想要完成的是让用户在 <input> 中键入一些文本框，单击提交按钮，并在 <input> 下显示文字区域通过 <li>在<ul>我创建了名为 comment-list .同样，我只希望将所述输入定位到从我的 JSON GET 请求导入的每个特定图像，而不会在任何单个元素上重复文本。 jQuery 似乎能够附加文本，但它不起作用，一双新的眼睛肯定不会受伤。

这是 jsbin:http://jsbin.com/tecaha/edit?output

代码:

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <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>
</head>
  <body>

    <header>
      <div class="top">



        <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">
            <ul id="images">





            </ul>
          </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;
}
#images {
  margin: 0 auto;
  display: block;
  padding-top: 50px;
  padding-bottom: 30px;
}
#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;
}
.liked {
  color: #ff0000;
}
.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, .info {
  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;
  margin-bottom: 65px;
}

#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: 420px;
  border: 1px solid #ccc;
  color: #4f4f4f;
  font-size: 16px;
  border: 0;
  bottom: 40px;
  padding: 15px;
  outline: none;
  background: transparent;
}
input, select, textarea{
  color: #f00;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
#comment-click {
  width: 30px;
  text-align: center;
  border: 1px solid #ccc;
  color: #4f4f4f;
  font-size: 16px;
  border: 0;
  bottom: 40px;

  padding: 15px;
  outline: none;
  background: transparent;
  cursor: pointer;
  float: right;
}
.inserted {
  cursor: pointer;
}
.post-liked .fa-heart {
   color: #f00;
}

JavaScript/jQuery

    // Variable of html strings
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 class="info">···</button>' +
    '</div>' +
    '<div id="clear"></div>' +
    '</div>' +
    '<div id="add-a-comment">' +
    '<div class="comment-container">' +
    '<form class="comment" action="index.html" method="post">' +
    '<input id="enter" type="text" name="newcomment" value="" placeholder="Add a comment...">' +
    '<button id="comment-click">Submit</button>' +
    '</form>' +
    '<ul class="comment-list">' +
    '</ul>' +
    '</div>' +
    '</div>' +
    '</li>' +
   '</div>';


// GET Request to grab the data from the JSON file
$(document).ready(function() {
  var jsonURL = "https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json";
  var newImage = "http://yourbizrules.com/wp-content/uploads/2014/08/Staying-Motivated.jpg";

  $.getJSON(jsonURL, function(json) {
      var imgList = "";

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

        });

        $('#images').append(imgList);

    });
});

// Like Photos
$(document).ready(function() {
    $('#images').on('click', '.inserted', function() {
//  $('.fa-heart').toggleClass('liked');
      var post_block = $(this).parents('.post').first();
       post_block.toggleClass('post-liked');
    });
});

// $('img.inserted').on('dblclick', function(){
//   var post_block = $(this).parents('.post').first();
//   post_block.addClass('post-liked');
//   console.log('Test');
// });


// Add Comment
 $(document).ready(function(){  
    $('#comment-click').on('click', function() {
       var userComment = $('input[name=newcomment]').val();
       $(".comment-list").append("<li>" + userComment + "</li>");

    });
   });

最佳答案

首先，如果您要一遍又一遍地重复相同的 html，则需要使用类，而不是 id。

然后，用于添加点击事件处理程序的 jQuery 在返回 json 之前运行。它看不到要添加事件处理程序的任何内容，也没有任何影响。我将代码移到了 getJSON 的回调函数中。

最后，如果你想引用一个特定的字段，你将需要使用 this 就像你对“喜欢”照片所做的那样。

// Variable of html strings
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 class="info">···</button>' +
    '</div>' +
    '<div class="clear"></div>' +
    '</div>' +
    '<div class="add-a-comment">' +
    '<div class="comment-container">' +
    '<form class="comment" action="index.html" method="post">' +
    '<input id="enter" type="text" name="newcomment" value="" placeholder="Add a comment...">' +
    '<button class="comment-click">Submit</button>' +
    '</form>' +
    '<ul class="comment-list">' +
    '</ul>' +
    '</div>' +
    '</div>' +
	'</li>' +
   '</div>';


// GET Request to grab the data from the JSON file
$(document).ready(function() {
  var jsonURL = "https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json";
  var newImage = "http://yourbizrules.com/wp-content/uploads/2014/08/Staying-Motivated.jpg";
    
  $.getJSON(jsonURL, function(json) {
    var imgList = "";
        
    $.each(json, function (i) {
        imgList += '<div class="post"><li><img class="inserted" src= " ' + json[i] + ' ">' + bottom;
      
    });
    
    
    $('#images').append(imgList);
    
    
// Like Photos
    $('#images').on('click', '.inserted', function() {
//  $('.fa-heart').toggleClass('liked');
      var post_block = $(this).parents('.post').first();
      post_block.toggleClass('post-liked');
    });
  
// Add Comment
    $('.comment-click').on('click', function() {
      var userComment = $(this).siblings('input[name=newcomment]').val();
      $(this).parent().siblings('.comment-list').append("<li>" + userComment + "</li>");
    
    });
  });
});
* {
  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;
}
#images {
  margin: 0 auto;
  display: block;
  padding-top: 50px;
  padding-bottom: 30px;
}
#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;
}
.liked {
  color: #ff0000;
}
.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, .info {
  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;
  margin-bottom: 65px;
}

.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: 420px;
  border: 1px solid #ccc;
  color: #4f4f4f;
  font-size: 16px;
  border: 0;
  bottom: 40px;
  padding: 15px;
  outline: none;
  background: transparent;
}
input, select, textarea{
  color: #f00;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
.comment-click {
  width: 30px;
  text-align: center;
  border: 1px solid #ccc;
  color: #4f4f4f;
  font-size: 16px;
  border: 0;
  bottom: 40px;
  
  padding: 15px;
  outline: none;
  background: transparent;
  cursor: pointer;
  float: right;
}
.inserted {
  cursor: pointer;
}
.post-liked .fa-heart {
   color: #f00;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <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>
</head>
  <body>

    <header>
      <div class="top">

        
        
        <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">
            <ul id="images">
              
              
              
              
              
            </ul>
          </div>

          

          
      </main>
      </div>
  </body>
</html>

关于javascript - 如何通过 JSON GET 请求将输入中的文本附加到单个元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32929190/

26 4 0
文章推荐： html - 如何水平对齐 3 张图像并将它们居中
文章推荐： php - 我应该使用什么过程来构建 linux 配置页面？
文章推荐： python - 根据值在另一个数据帧中的频率将值附加到一个数据帧
文章推荐： java - 斯坦福 CoreNLP 仅在 Windows 上失败
太空宇宙
个人简介

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

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