Javascript 函数JS可以';t在HTML中追加
我创建了一个JavaScript函数来附加HTML,但无法显示它。 我在HTML上创建了一个数组,我想用我的函数添加行。 我创建了一个ajax请求,以获取我的图像 HTML: 用于添加HTML的函数“createPostItem”:Javascript 函数JS可以';t在HTML中追加,javascript,html,jquery,json,ajax,Javascript,Html,Jquery,Json,Ajax,我创建了一个JavaScript函数来附加HTML,但无法显示它。 我在HTML上创建了一个数组,我想用我的函数添加行。 我创建了一个ajax请求,以获取我的图像 HTML: 用于添加HTML的函数“createPostItem”: function createPostItem(name, image, madeFor, size) { var RowsNumber; if (size == 'story') { RowsNumber = 'span 2 / s
function createPostItem(name, image, madeFor, size) {
var RowsNumber;
if (size == 'story') {
RowsNumber = 'span 2 / span 2';
} else {
RowsNumber = 'span 1 / span 1';
}
var html = '<div style="grid-row: ' + RowsNumber + ';">' +
'<div class="flex text-gray-200 animate__animated animate__fadeIn">' +
'<div class="mx-auto transition duration-300 ease-in transform hover:-translate-y-2">' +
'<img class="block shadow-2xl" src="' + image + '" alt="' + name + '"' +
'<div class="absolute">' +
'<div class="absolute btn-i text-center pt-2">' + name + '</div>' +
'<span class="flex absolute font-semibold tracking-wide justify-center absolute-pill px-1 text-xxs bg-yellow-400 text-gray-900 rounded-full text-xs">' + madeFor + '</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$(".images-array").append(html);
}
您在控制台中看到任何错误吗?没有,这是无法忍受的:@您可以在问题中发布
数据操作吗?尝试在var RowsNumber中设置断点
并查看浏览器是否访问它..断点是console.log?x、 x“对不起
var urlPost = "assets/js/imgStock.json"
$.ajax({
type: 'GET',
url: urlPost,
success: function (data) {
$.each(data, function (key, value) {
createPostItem(value.name, value.image, value.madeFor, value.size);
});
}
});
function createPostItem(name, image, madeFor, size) {
var RowsNumber;
if (size == 'story') {
RowsNumber = 'span 2 / span 2';
} else {
RowsNumber = 'span 1 / span 1';
}
var html = '<div style="grid-row: ' + RowsNumber + ';">' +
'<div class="flex text-gray-200 animate__animated animate__fadeIn">' +
'<div class="mx-auto transition duration-300 ease-in transform hover:-translate-y-2">' +
'<img class="block shadow-2xl" src="' + image + '" alt="' + name + '"' +
'<div class="absolute">' +
'<div class="absolute btn-i text-center pt-2">' + name + '</div>' +
'<span class="flex absolute font-semibold tracking-wide justify-center absolute-pill px-1 text-xxs bg-yellow-400 text-gray-900 rounded-full text-xs">' + madeFor + '</span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$(".images-array").append(html);
}
[
{
"name": "Calendrier Sofiane Boufal",
"image": "img/Boufal_Story.jpg",
"size": "story",
"madeFor": "Asala Finances"
},
{
"name": "Cover fictive rap",
"image": "img/Roshi_Cover.jpg",
"size": "post",
"madeFor": "Captain Roshi",
},
{
"name": "Visuel promotionnel Instagram",
"image": "img/Post-Instagram-Edi.jpg",
"size": "post",
"madeFor": "Edi Kuka",
},
{
"name": "Calendrier Jean-Pierre Nsame",
"image": "img/mars_nsame.jpg",
"size": "story",
"madeFor": "Asala Finances"
},
{
"name": "Anniveraire Houboulang Mendes",
"image": "img/Mendes-Birthday.jpg",
"size": "story",
"madeFor": "Asala Finances"
}
]