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

好的。据我所能理解的（通过查看您的代码）。您无法使用简单的on注册用于动态添加的元素的事件。您必须使用委托。

尝试一下

1）删除函数调用（在循环内）

2）删除整个函数showDescription并添加事件，如下所示：

 $('#blog-posts').on('click', '.unique-title',function(){
     alert('title clicked').
 });

3）为了显示描述，我认为最好的方法是将描述添加到div中并隐藏它。单击标题后，稍后显示。

 (inside the loop)
 $('<div class = "desc" style="display:none">' + description + '</div>').appendTo(monthBlogPosts);

然后在上面的＃2。替换为此。

$('#blog-posts').on('click', '.unique-title',function(){
    $(this).next('.desc').show(); //I am assuming desc will be next to the clicked title here. You can modify it as needed.
});

最后，这只是代码的概述，因此可能无法按预期工作，但是我敢肯定，这应该会给您一个想法并让您入门

Answer 2

您应该使用事件委托将点击事件附加到文档上，当.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)
  })

如何通过jquery

2 个答案: