Question

我有一个简单的例子：

<a id="my_videos" href="#" title="123"><img src="http://placehold.it/350x150"></a>
<a id="my_videos" href="#" title="223"><img src="http://placehold.it/350x150"></a>
<a id="my_videos" href="#" title="323"><img src="http://placehold.it/350x150"></a>

$('#my_videos').live('click', function() {
    var ide = $('#my_videos').attr('title');
    alert (ide);
});

每次点击链接时都会弹出相同的值123

我做错了什么？

感谢

这是一个jsfiddle

Answer 1

将id="my_videos"重命名为class="my_videos"。 ID应该是唯一的。然后，在事件侦听器中使用this来引用刚刚单击的元素。

<a class="my_videos" href="#" title="123"><img src="http://placehold.it/350x150"></a>
<a class="my_videos" href="#" title="223"><img src="http://placehold.it/350x150"></a>
<a class="my_videos" href="#" title="323"><img src="http://placehold.it/350x150"></a>

$('.my_videos').live('click', function() {
    var ide = this.title;
    alert (ide);
});

对于这种情况，Vanilla JavaScript更清晰。如果您想使用jQuery获取标题，请使用：

var ide = $(this).attr('title');

Answer 2

您的案例中的问题是使用相同ID的多个实例。

根据定义，

ID只能在整个页面上出现一次。没有2个元素可能具有相同的ID。

这就是为什么当jQuery搜索您单击的元素时，它只会找到具有该ID的第一个元素。您必须使用类名。

此外，您应该使用$(this)来引用触发事件的元素（您单击的元素）而不是与选择器匹配的随机元素。

$('.my_videos').live('click', function() { //Note the classname use and not id
    var ide = $(this).attr('title');
    alert(ide);
});

使用JavaScript的原生this的更短版本：

$('.my_videos').live('click', function() {
    var ide = this.title;
    alert(ide);
});

Answer 3

您应该this而不是#my_videos：

$('#my_videos').live('click', function() {
    var ide = $(this).attr('title');
    alert (ide);
});

jquery如何获得标题attr？

3 个答案: