如何从 API 点击动态显示 JSON 数据？

Question

我已经成功解析了来自 Tumblr API 的数据，直到我在正文描述中引入了tags。 （这包括图片、超链接等）

我实际上在做的是创建一个博客标题列表。根据单击的标题动态显示博客描述。我觉得这段代码由于引用问题而中断，但我不确定如何解决这个问题。

HERE IS A CODEPEN 用完整代码演示问题。

这只是部分查看错误：

      //...
      $.each(inner, function(i, obj) {

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

     // Source of the error
     // data-description includes an <a> tag that breaks the code
          $('<div class = "title-list" data-title = "<h3>' + title + '</h3>" data-description="' + description  + '">' + title + '</div>').appendTo(monthblogList)

        })
      })
    });

    function showBlogEntry(element){
      var t = $(element).data('title')
      var ds = $(element).data('description')

      blogEntry.empty()

      $(t).appendTo(blogEntry)
      $(ds).appendTo(blogEntry)
    }
}

再次，我建议您查看CODEPEN 以获得更好的理解。我在第一篇博文中包含了a 标签，以显示该问题。 Here 是原博文。

这是我想到的一种解决方案：

if ($(description).has("a")) {
  // do something
}

但仍不确定如何解决此问题。

我需要从title 和description 变量中获取信息，并根据用户点击的标题在点击时显示其数据。这是一种解决方案，尽管它可能不是最好的。如果除了data 标签之外还有其他解决方案，那将不胜感激。提前致谢。

Answer 1

不要将数据存储在 HTMLDivElement 的“data-”属性中，只需在您的 javascript 中保留对来自 API 的 JSON 响应的引用并存储 index 或 id 在“data-”属性中（可能是“data-post-id”）

var blogData = [{Title: .., Description: ...}, ...]; //Data from JSON Response

...
...

$('<div class = "title-list" data-post-id =' + postId +'>' + title + '</div>').appendTo(monthblogList);

...
...    

function showBlogEntry(element){
      var id = $(element).data('post-id')
      var close = $('<span id = close> x </span>')

      blogEntry.empty()

      $(close).appendTo(blogEntry)
      $('<h3>' + blogData[id].Title + '</h3>').appendTo(blogEntry)
      $(blogData[id].Description).appendTo(blogEntry)

      $("#close").on("click", function (event) {
        blogEntry.empty()
        about.fadeIn()
      });
    }