Javascript 函数JS可以';t在HTML中追加

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

我创建了一个JavaScript函数来附加HTML,但无法显示它。 我在HTML上创建了一个数组,我想用我的函数添加行。 我创建了一个ajax请求,以获取我的图像

HTML:

用于添加HTML的函数“createPostItem”:

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"
  }
]