时间戳

首页 > 解决方案 > 使用 JQuery 一次将 JSON 数据传递到 div

jquery - 使用 JQuery 一次将 JSON 数据传递到 div

问题描述

我在一个数组中按月对 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) 
    })

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

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

标签： jqueryarraysjsonparsingmodel-view-controller

解决方案

由于我看不到您的完整代码，因此我不能保证这会奏效。

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

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

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

推荐阅读