Question

我已经按月对数组中的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，但是没有运气。请说明如何执行此操作，并在此先感谢

Answer 1

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

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

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

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

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

1 个答案: