Question

使用此HTML：

<ul>
  <li>
    <a href="#">Link 1<img src="#" alt="photo 1"/></a>
  </li>
  <li>
    <a href="#">Link 2<img src="#" alt="photo 2"/></a>
  </li>
  <li>
    <a href="#">Link 3<img src="#" alt="photo 3"/></a>
  </li>
</ul>

使用这个Jquery只给出了所有3的第一个LI元素的alt：

 var altText = $( "#actioncall_buttons li > a > img" ).attr( "alt" );   

    $( "#actioncall_buttons li" ).hover(function() {

        $( this ).append( "<span>"+altText+"</span>" );
    }, function() {

        $( "#actioncall_buttons li span" ).remove();

    });

如何显示每个特定li元素的alt？

Answer 1

你做错了。你应该在悬停时获得替代文字。

$( "#actioncall_buttons li" ).hover(function() {
var altText = $( this ).find("img").attr( "alt" );   
    $( this ).append( "<span>"+altText+"</span>" );
}, function() {
    $( "#actioncall_buttons li span" ).remove();
});

<强> Working Fiddle

Answer 2

您无法使用

获取其alt属性

$( "#actioncall_buttons li > a > img" ).attr( "alt" )

这是因为你的jQuery选择器选择了多个alt属性。他们每个人都有不同的内容。在这种情况下jQuery做的是返回它找到的第一个。

因此，如果您想要访问所有不同的alt标记，您可以像这样访问它们：

var images = $( "#actioncall_buttons li > a > img" );
$(images).each(function() { 
    var alt = $(this).attr("alt");
});

在悬停时为每个LI元素显示ALT属性

2 个答案: