javascript - 如何使用 jquery 显示点击时的动态数据

Question

编辑:This是一种更合理的方法，因为提供的答案在实现 a 标签或 img 标签时可能存在错误。

================================================== =================

我正在从 API 调用博客数据。 (我已按月将数据重新格式化为数组)。

到目前为止，博客标题已打印到网页上。我希望用户能够单击标题并显示其描述。

这是迄今为止我的一些代码:

var blogPosts = $('#blog-posts');

    $.each(byMonth, function(key, value) {
      var outer = byMonth[key]

      $.each(outer, function(k, v) {
        var inner = outer[k]

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

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

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

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

          // if a title is clicked, show its Description
          showDescription(description);

        })
      })
    });

    function showDescription(d){
      $('.unique-title').on('click', function(){
        $('<p>' + d + '</p>').appendTo('body')
        console.log(d)
      })
    }

当我单击标题时，将打印所有描述，而不是匹配的描述。我明白这是因为我在嵌套循环中调用了该函数，但在调用其外部的描述变量时也遇到了麻烦。

我也尝试过

showDescription(title, description)

//...

function showDescription(t, d){
      $(title).on('click', function(){
        $('<p>' + d + '</p>').appendTo('body')
        console.log(d)
      })
    }

但是 html 页面上没有打印任何内容。

本质上，我想获取标题索引，并在单击时打印其各自的描述。

Answer 1

您应该使用事件委托(delegate)将单击事件附加到文档，当 .title-list 是事件目标时，该事件将冒泡并触发。

$(document).on('click', '.title-list', function(event) { 
    showDescription(event.currentTarget) // pass the element being clicked (we will need it later)
})

您还需要修改获取描述的方式。您可以将描述存储在 .title-list 的数据属性中，如下所示:

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

现在您可以修改 showDescription() 以便它可以从我们传递给函数的元素中获取数据

function showDescription(element){
    var d = $(element).data('description')
    $('<p>' + d + '</p>').appendTo('body')
    console.log(d)
  })