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

Posted 2023-05-08

【中文标题】使用 JQuery 一次将 JSON 数据传递到 div

【英文标题】：Passing JSON data into div one at a time with JQuery

【发布时间】：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，但没有运气。请解释一下如何做到这一点，并提前感谢

【参考方案1】：

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

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

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

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

【讨论】：

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