如何将特定 HTML 文件引用到 JSON 文件中的特定数组

Question

我有一个 JSON 文件 (https://github.com/conde-nast-international/cnid-tech-tests/blob/master/data/article.json)，其中包含有关杂志文章（标题、正文、封面图片等）的数组数据。

我制作了一个 HTML 页面，列出了所有标题和封面图片（见下图）

我希望每篇文章在被点击时重定向到我制作的另一个 HTML 文档（使用相同的 JSON 数据），该文档显示有关文章的更多详细信息（见下图）

问题是，我目前只有一个 index.html 文件和几个其他文章 HTML 文件（article-one.html、article-two.html、article-three.html 等），用于每个单独的文章数组。有没有办法可以将每篇文章的 JSON 数组引用到相应的 HTML 文件？抱歉，如果这看起来有点令人困惑，我花了几天时间试图弄清楚如何在没有运气的情况下做到这一点，因此非常感谢所有建议。谢谢你。

索引.html：

<div id="header">
  <img src="images/cn-header.jpg" alt="logo" />
</div>

Article-one.html：

<div id="header">
  <img src="images/cn-header.jpg" alt="logo" />
</div>

JavaScript（用于 index.html）：

$(document).ready(function() {
  $.getJSON("article.json", function(data){
    console.log(data) //just to log in console as well
    var article_data = '';
    $.each(data, function(key, value){
      article_data += '<div class="article"> <a href=" '+ /*somehow must link to other HTML pages I've created*/ +' ">';
      article_data += '<div class="title-home">' + value.title + '</div>';
      article_data += '<div class="cover-home"> <img src="' + value.cover + '"> </div>';
      article_data += '</a> </div>';
    });
    $('#container').append(article_data);
  });
});

JavaScript（用于 article-one.html）：

$(document).ready(function() {
  $.getJSON("article.json", function(data){
    console.log(data) //just to log in console as well
    var article_data = '';
    $.each(data, function(key, value){
      article_data += '<div class="a-body">';
      article_data += '<div class="page-left">';
      article_data += '<div class="page-title">' + value.title + '</div>';
      article_data += '<div class="page-cover"> <img src="' + value.cover + '"> </div>';
      article_data += '</div>';
      article_data += '<div class="page-right">';
      article_data += '<div class="page-body">';
      $.each(value.body, function (index, el) {
         if (el.type == 'plaintext') {
           article_data += '<div class="plaintext">' + el.body + '</div>';
         } else if (el.type == 'h2') {
           article_data += '<div class="h2">' + el.body + '</div>';
         } else if (el.type == 'pull_quote') {
           article_data += '<div class="pull_quote">' + el.body + '</div>';
         }
      });
      article_data += '</div>';
      article_data += '</div>';
      article_data += '</div>';
    });
    $('#container').append(article_data);
  });
});

Answer 1

我认为您可以在 json 对象中添加一个名为 article 的字段，您可以在其中保存用户点击您的卡片时要打开的链接。

Javasript

var data = [
 {id: 1, article: 'article-one.html', title: 'First Lorem ipsum', image: 'path/img/1'},
 {id: 2, article: 'article-two.html', title: 'Second Lorem ipsum', image: 'path/img/2'}
];

var store= '';

$(document).ready(function(){
   data.forEach(function(item, index){
       store = store+'
          <div id="'+item.id+'"class="card">
            <a href="'+item.article+'">
               <h1>'+item.title+'</h1>
               <div class="body">
                  <img src="'item.image'">
               </div>
             </a>
          </div>
       ';
   });

   $('.cards').html(store);

});

html

<div class="cards">
   <!-- your cards will be loaded here -->
</div>