Question

我正在使用Shuffle.JS，这是生成卡片的javascript：

function getMarkupFromData(dataForSingleItem) {
   var blogtitle = dataForSingleItem.blog_title
   var blogtext = dataForSingleItem.blog_text
   var blogimage = dataForSingleItem.blog_image
   var blogbutton = dataForSingleItem.blog_url
   var categories = dataForSingleItem.blog_tags
   var blogdate = dataForSingleItem.date
   return [
     '<div class="js-item mb-4" style="width: 22rem;" data-groups=' + categories + ' data-date-created= '+ blogdate +' data-title="'+ blogtitle + '">',
     '<div class="card w-100">',
     '<img class="card-img-top" src="' + blogimage +'">',
     '<div class="card-body">',
     '<div class=js-item__details>',
     '<h3 class="card-title bold">' + blogtitle + '</h3>',
     '</div>',
     '<p class="card-text">' + blogtext + categories + '</p>',
     '<a href="' + blogbutton + '" class="btn btn-primary">Read More</a>',
     '</div>',
     '</div>',
     '</div>'
   ].join('');
 }

这很好但问题是某些JSON没有图像，因为它们只是带文本的标题。做这个的最好方式是什么？如果我在JSON中保持图像值/键为空它仍会生成img类行，然后显示一张缺少图像的卡片。

那么我如何生成如上所述的HTML，但是如果缺少blog_image，它就不会生成那个img行。

Answer 1

在所有变种之下，在返回之前：

if (blogimage === null) { // Depending on what comes back from JSON just check if it's empty/null/length is 0
    // return markup without <img> tag
}
else {
    // return markup you have now
}

当一些卡有图像而一些卡没有图像时，从AJAX调用生成HTML（引导卡）到JSON文件

1 个答案: