在 jquery 中将 alt 文本作为图像标签回显的问题

Question

我正在处理 jquery 脚本以显示翻转，现在我需要在 div 框中显示每个图像替代文本

这是我的 jquery 代码：

$(document).ready(function(){


$("ul.thumb li").hover(function() {
    $(this).css({'z-index' : '10'});
    $(this).

    find('img').addClass("hover").stop()
        .animate({
            width: '174px', 
            height: '174px',
        }, 200);

    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).find('img').removeClass("hover").stop()
        .animate({
            width: '100px', 
            height: '100px', 
        }, 400);
});

    $("ul.thumb li a").click(function() {

        var mainImage = $(this).attr("href"); //Find Image Name
        $("#main_view img").attr({ src: mainImage });
        return false;       
    });

});

和html：

<ul class='thumb'>
<li><a href='#'><img src='path' alt='this-text'></a></li>
<li><a href='#'><img src='path' alt='this-text'></a></li>
<li><a href='#'><img src='path' alt='this-text'></a></li>
</ul>
<div id='imglabel'></div>

现在我如何在

中显示每个图像的 alt 值

div id='imglabel'

鼠标悬停时的效果

Answer 1

您可以遍历每个图像并将它们的 alt 属性附加到 imglabel：

  $("#imglabel").mouseover(function() {

      $("img").each(function() {

          $("#imglabel").append($(this).attr('alt'));
      })
  }).mouseout(function() {

      $(this).empty();
  })