我正在尝试将卡片一张一张对齐。我已经完成了下面的编码,不确定为什么我不能一个接一个地显示它。
我在这里尝试调用 REST API,我从 REST API 获得的结果是一个列表,我需要通过 for 循环迭代结果,然后以卡片形式显示获取的数据。请有人指导我解决这个问题,谢谢..
client.js
$(document).ready(function() {
$.ajax({
url: "REST API CALL",
success: function(data){
data.forEach(function(a) {
var html = `
<div class="row">
<div class="">
<div class="card" style="width: 20rem; text-align:center;display:inline-block;">
<img class="imagee" src="im.png" alt="image" height="200" width="200" style="border-radius:.60rem;">
<div class="card-body">
${a[0]}|${a[4]}<br>
${a[7]}<br>
<i class="fa fa-car"></i>${a[9]}
<p class="card-text"></p>
</div>
</div>
</div>
</div>`
$('#msgs').append(`<div>${html}</div>`);
});
}
}).then(function(data) {
});
});
最佳答案
更改下面的代码,并将 <div class="row">
在此函数之外和具有 id="msgs"
的 html 元素周围, 自 div class row
需要围绕所有卡片元素。
$(document).ready(function() {
$.ajax({
url: "REST API CALL",
success: function(data) {
data.forEach(function(a) {
var html = `
<div class="card col-4" style="text-align:center;">
<img class="imagee" src="im.png" alt="image" height="200" width="200" style="border-radius:.60rem;">
<div class="card-body">
${a[0]}|${a[4]}<br>
${a[7]}<br>
<i class="fa fa-car"></i>${a[9]}
<p class="card-text"></p>
</div>
</div>`;
$("#msgs").append(`<div>${html}</div>`);
});
}
}).then(function(data) {});
});
关于jquery - 动态地将三张卡片水平对齐一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53535375/