javascript - 如何将特定 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>

文章一.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

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

JavaScript

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>