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

Question

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

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

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

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

        });
};

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

Answer 1

在点击事件中进入时，可以使用$(this)元素。

并使用 class 名称而不是 ID。

所以：

App.prototype.listenerFilms = function(){
    $("#amatx").on('click', function(evt){
        console.log($(this).find('p#titol').text());
    });
};

Answer 2

使用类而不是 ID，因为 ID 必须是唯一的（jQuery 只会匹配具有给定 ID 的第一个元素）。

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

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

例如

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

这将适用于仅在活动时间（而不是仅在活动注册时间）存在的元素。它侦听冒泡到祖先的事件（在本例中为单击），然后将 jQuery 选择器应用于气泡链中的元素，然后仅对引起事件的任何匹配元素调用该函数。

注意：如果没有其他元素 closer/convenient 可以附加委托事件处理程序，则 document 是默认值。切勿将 body 用于委托事件，因为它的计算高度可能为 0，具体取决于样式，因此不会获得点击事件。坚持 document 作为默认设置。

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

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

Answer 3

$("#thumb").on('click', function(e) {
    var target = $(e.target);
    if(target.hasClass('amatx')) {
        console.log(target.closest('li').next('.titol').text());
    }    
});

Fiddle

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

How to get information from a clicked element with JQuery?

html

javascript

jquery