目标是创建一个带有引导程序的4张卡片的页面,其中包含图像,标题,少量文本和一个更多按钮。 (基本上是一个包含博客文章列表的博客页面)。

这必须在没有服务器且完全本地的情况下完成。维护不是问题,这是一个个人站点。



所以我的思考过程是:


有一个手工制作的JSON文件,如下所示:(存储在/JSON/bloglist.json/中)

{
articles: [
    {title: "blog article 1", url: "/blog/blog-article-1.html", image: "/images/blog/blog-article-1.png", exerpt: "Lorem Ipsum blabla interesting preview to the site", tags: ["a", "b", "c"]},
    {title: "blog article 2", url: "/blog/blog-article-2.html", image: "/images/blog/blog-article-2.png", exerpt: "Lorem Ipsum blabla interesting preview to the site", tags: ["a", "c"]},
    {title: "blog article 3", url: "/blog/blog-article-3.html", image: "/images/blog/blog-article-3.png", exerpt: "Lorem Ipsum blabla interesting preview to the site", tags: ["a"]},
]


}
然后用ajax调用JSON文件
然后让javascript使用Shuffle.JS生成卡,可以使用(加载更多帖子)按钮过滤,搜索并动态加载卡片。




从文档中,我可以找出如何从API加载更多内容,也可以找出如何使用Shuffle.JS来创建漂亮的图像网格。

我不知道的是:


如何在Bootstrap 4卡中使用Shuffle.JS
如何使用Ajax调用来调用本地JSON文件

最佳答案

可能是这样的:

$.getJSON('/JSON/bloglist.json/', function( data ) {
    for(var key in data.articles){
         var out='<div class="card">';
              out+='<div class="card-header">'+data.articles[key].title+'</div>';
              out+='<img class="card-img-top" src="'+data.articles[key].image+'" alt="...">';

               out+='<div class="card-body">';
               out+=data.articles[key].exerpt;
               out+='<div class="cls-for-load"></div>';
               out+='<button class="btn btn-primary" onclick="$(this).parent().find(\'.cls-for-load\').load( \''+data.articles[key].url+'\');">more...</button>';
               out+='</div>';
               out+=
            out+='</div>';
            $('body').append(out);
    }
});

关于javascript - ajax调用本地自定义JSON文件以使用JS创建Bootstrap 4卡?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50213958/

10-09 15:20
查看更多