javascript - 如何使用 JQuery 从单击的元素中获取信息？

Question

我创建了一个列表，其中显示缩略图以及每个列表旁边的电影名称。对于每个新缩略图，我都会进行以下调用:

$("#thumb").append('<li><img id="amatx" src='+value+' /></li><p id="titol">'+titl+'</p>');

thumb 是列出缩略图和标题的除数。 value 包含缩略图的链接，而 titl 包含标题。我从 API 获取所有这些信息。现在我想创建一个监听器，当我单击缩略图或标题时，它会显示电影的名称。这是我现在得到的:

App.prototype.listenerFilms = function(){
        $("#amatx").on('click', function(evt){

        });
};

我真的不知道如何获取信息，因为所有图像和标题都有相同的 ID...有人可以帮助我吗？

Answer 1

1. 使用类而不是 ID，因为 ID 必须是唯一的(jQuery 将仅匹配具有给定 ID 的第一个元素)。

$("#thumb").append('<li><img class="amatx" src='+value+' /></li><p class="titol">'+titl+'</p>');

由于您有动态元素，请使用附加到不变祖先元素的委托(delegate)事件处理程序

例如

$(document).on('click', '.amatx', function(){
     // Listener code here
});

这适用于仅在事件时间(而不仅仅是事件注册时间)存在的元素。它监听冒泡到祖先的事件(在本例中为单击)，然后将 jQuery 选择器应用于冒泡链中的元素，然后仅调用该函数导致事件的任何匹配元素。

注意: document如果没有其他元素更接近/方便附加委托(delegate)事件处理程序，则为默认值。切勿使用body对于委托(delegate)事件，因为根据样式，它的计算高度可以为 0，然后将不会获得点击事件。坚持document作为默认值`。

JSFiddle: http://jsfiddle.net/TrueBlueAussie/5dsqdq5h/

关于您下面的评论，您需要从点击的元素向上搜索，然后找到下一个titol元素在它旁边。