Question

我有这张幻灯片，其中包含来自JSON Feed的图片。图像具有从Feed中获取的alt属性，但我想在图像上显示alt的值。这不起作用，因为它只显示第一张图像中的第一个alt。

我该怎么做？

这是我必须修改的行：

htmlString += '<img src="' + item.url_m + '" alt="' + item.title + '"><span class="etc">"'+item.title+'"</span>';

这是完整的代码：

$(document).ready(function() {
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) { 
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;

        var JSONURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=d512a7bb4b7c0a6eb65d5095464ebf3f&format=json&privacy_filter=1&media=photos&tag=london&has_geo=1&accuracy=11&content_type=1&extras=geo,owner_name,url_m&page=1&per_page=20&radius_units=km&radius=5&lat="+lat+"&lon="+lon+"&jsoncallback=?";
  jQuery.getJSON( JSONURL, getJSONimages); 
  function getJSONimages(data) {
    var htmlString = "";
    $.each(data.photos.photo, function(i,item){
        htmlString += '<img src="' + item.url_m + '" alt="' + item.title + '"><span class="etc">"'+item.title+'"</span>';
    });      
    $('#slideshow').html(htmlString); 
    $('#slideshow').slideshow({
                timeout: 3000,
                type: 'random',
                fadetime: 2000
            });      
  }         
    });
}
else {    

}         
  })

我试过这样但是不起作用？

var display_alt = $("#slideshow img").attr("alt");然后再显示跨度中的display_alt var，同样的问题。

Answer 1

$("#slideshow img")选择所有#slideshow元素后代的图像。如果要获取特定图像的alt属性，则需要使用以下内容缩小搜索范围：

$("#slideshow img").eq(1).attr('alt');//this will select the second image in the set

文档：http://api.jquery.com/eq

$("#slideshow img").eq($("#slideshow img").index(current_slide_element)).attr('alt');//this will select the image in the set that matches the element stored in the `current_slide_element` variable

文档：http://api.jquery.com/index

幻灯片插件很多时候会在当前幻灯片中添加一个类，或者将当前幻灯片索引存储在一个可访问的变量中。您可以使用这些方法查找当前幻灯片的索引，以获取该特定幻灯片的alt标记。没有更多的信息，就像我能得到的一样精确。

Answer 2

这应该有效。它遍历每个<img>并将其alt属性复制到<span class="etc">：

$("#slideshow img").each(function(){
  var alt = $(this).attr("alt");
  $(this).next("span.etc").html(alt);
});

使用图像同时更改文本

2 个答案: