编辑: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 页面上没有打印任何内容。
本质上,我想获取标题索引,并在单击时打印其各自的描述。
最佳答案
您应该使用事件委托(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)
})
关于javascript - 如何使用 jquery 显示点击时的动态数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51865810/