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);

}）;

当doc加载时，这似乎适用于第一个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

Answer 2

试试这个：

更新：修正了拼写错误

$(document).ready(function() {
     var altText = "";
     $('#slider ul li img').each(function(a, b){
        altText += $(b).attr('alt') + "<br/>";
     });

   $('#contentTitle').append(altText); //Remove the div from the slecttor, since you are using ID selector this version is faster.
});

JsFiddle：http://jsfiddle.net/vsDze/

尝试在简单的滑块旋转木马中显示所有图像的替代文字

2 个答案: