gpt4 book ai didi

javascript 循环思想 bootstrap

转载 作者:行者123 更新时间:2023-12-03 06:12:44 25 4
gpt4 key购买 nike

我有一个简单的 Bootstrap 页面,我需要将 JSON 数据加载到其中:

这是我的脚本:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var tweets = JSON.parse(xhr.responseText);

var tweet = ' <div class="col-xs-12 col-sm-6 col-md-8 col-md-offset-3">';
var name = ' <h4 class="card-title">';
var photo = ' <div class="col-md-4 col-md-offset-3"><div class="col-md-4 ">';

for (var i = 0; i < tweets.length; i += 1) {

name += tweets[i].name;
name += '</h4> </div>';

tweet += ' <div class="jumbotron">';
tweet += ' <p class="card-text">';
tweet += tweets[i].tweet;
tweet += "<br>";
tweet += "</p></div></div>";

photo += ' <img class="img-responsive img-circle" src="user/';
photo += tweets[i].activation;
photo += '/';
photo += tweets[i].pic;
photo += '"></div></div>';

document.getElementById('photo').innerHTML = photo;
document.getElementById('name').innerHTML = name;
document.getElementById('tweet').innerHTML = tweet;

// close all html tags
}
}
};
xhr.open('GET', 'empdata.json');
xhr.send();

这是我的 HTML:

<div class="container">
<div class="card">
<div class="card-header">
<div class="row">
<div id="photo">
<!-- here where the pic goes ! -->
</div>
<div id="name">
<!-- here where the name goes ! -->
</div>
</div>
<div class="card-block row">
<div id="tweet">
<!-- here where the tweet goes ! -->
</div>
</div>
</div>
</div>
</div>
</div>

<div class="card-block row">
<div id="tweet"> </div>
</div>

它正确地循环遍历所有 JSON 数据,但它首先显示所有图片,然后显示名称,最后分别显示推文。认为问题与我在循环中遵循的机制有关。

最佳答案

我想你是想这么做。它可以更简单,但不改变你的 html 我会这样做:

var container = document.querySelector(".container");
for (var i=0; i<tweets.length; i += 1) {
var name = ' <h4 class="card-title">';
name += tweets[i].name;
name += '</h4> </div>';
var tweet = '<div class="col-xs-12 col-sm-6 col-md-8 col-md-offset-3">'
tweet += ' <div class="jumbotron">';
tweet += ' <p class="card-text">';
tweet += tweets[i].tweet;
tweet += "<br>";
tweet += "</p></div></div>";
var photo ='<div class="col-md-4 col-md-offset-3"><div class="col-md-4 ">'
photo += ' <img class="img-responsive img-circle" src="user/';
photo += tweets[i].activation;
photo += '/';
photo += tweets[i].pic;
photo += '"></div></div>';

container.innerHTML+='<div class="card"><div class="card-header">'+
photo+name+tweet+'</div></div>';
}

关于javascript 循环思想 bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39250736/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com