使用 JQuery 一次将 JSON 数据传递到 div答案

【问题标题】：Passing JSON data into div one at a time with JQuery使用 JQuery 一次将 JSON 数据传递到 div
【发布时间】：2019-01-25 13:02:05
【问题描述】：

我在一个数组中按月对 JSON 数据进行了排序。这是输出，填充了样本数据：

[{"Title":"A Sample Title","Description":"<p>with sample descriptions</p>","DatePublished":"2018-08-15 01:42:10 GMT"},
{"Title":"post 2","Description":"<p>Sample post 2</p>","DatePublished":"2018-08-11 21:58:50 GMT"},
{"Title":"post 1","Description":"<p>Sample post 1</p>","DatePublished":"2018-08-11 21:57:58 GMT"}]

以下是部分代码：

var blogList = $('#blog-list');
var blogEntry = $('#blog-entry')

        //...
        var monthblogList = $('<div class = "month"> </div>').appendTo(blogList);

        $.each(inner, function(i, o) {

          title = inner[i].Title
          description = inner[i].Description
          date = inner[i].DatePublished

          $('<div class = "title-list" data-description="'+ description  +'"><h3 class = "unique-title">' + title + '</h3></div>').appendTo(monthblogList)

        })

    function showBlogPost(element){
      var d = $(element).data('description')
      $(d).appendTo('body')
    }

    $(blogList).on('click', '.title-list', function(event) {
      showBlogPost(event.currentTarget) 
    })

我希望能够在#blog-entry div 中一次显示一篇博客文章（包括标题、描述和发布日期），具体取决于点击的标题。

现在我有它，其中相应的描述被抓取和打印，但每次点击它都会一遍又一遍地打印。我尝试做的这种方法可能是完全错误的。我尝试了几种方法，例如切换和显示 div，但没有运气。请解释一下如何做到这一点，并提前感谢

【问题讨论】：

标签： jquery arrays json parsing model-view-controller

【解决方案1】：

由于我看不到您的完整代码，我无法保证这会起作用。

确保先清空#blog-entry 的内容。

将新内容添加到#blog-entry 而不是body。

function showBlogPost(element){
   blogEntry.empty();
   var d = $(element).data('description')
   $(d).appendTo(blogEntry);
}

【讨论】：

哇，这么简单的解决方案。谢谢！