目标是拥有一个包含 bootstrap 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 创建漂亮的图像网格。
我不知道的是:
如何将 Shuffle.JS 与 Bootstrap 4 卡一起使用
如何使用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/