jquery - 尝试在 easySlider 轮播中显示所有图像的替代文本

Question

我有以下 html:

<div id="slider">
    <ul>
        <li><a href="#" filename="strangeweather_1"><img src="large/strangeweather_1.jpg" alt="Baby, You're Just Like Stereo Equipment - ink, watercolor, gouache on paper" /></a></li>
        <li><a href="#" filename="strangeweather_2"><img src="large/strangeweather_2.jpg" alt="I Don't Mind If You Sleep Through This Or It Wakes You - ink, gouache, watercolor on paper" /></a></li>
        <li><a href="#" filename="strangeweather_3"><img src="large/strangeweather_3.jpg" alt="It's Not Over Yet - ink, watercolor, gouache, graphite on paper" /></a></li>
    </ul>
</div>

<div id="contentTitle"><!-- append alt text here -->
</div>

我的 jQuery 看起来像这样:

$(document).ready(function() {
   var altText = $(this).find('#slider ul li img').attr('alt');
   $('div#contentTitle').append(altText);

});

当文档加载时，这似乎适用于第一个 img alt。不确定如何显示每个图像的替代文本，因为它是通过轮播加载的。

jquery 是否有效地获取 alt 的副本并将其存储以供操作？我正在考虑使用 .offset() 在绝对位置显示 alt。我不知道每次加载当前图像时如何显示 alt。

希望这是有道理的。

所有代码都在这里:http://dev.jessicaharby.com/work/

Answer 1

你可以试试each()方法:

$(document).ready(function() {
   $('#slider ul li img').each(function() {
         $('div#contentTitle').append($(this).attr('alt'));
   }); 
})

DEMO