이미지와 함께 텍스트를 변경하십시오.

Question

JSON 피드에서 가져온 이미지로이 슬라이드 쇼를 가지고 있습니다. 이미지에는 피드에서 가져온 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 요소의 자손 인 모든 이미지를 선택합니다.

$("#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 속성을 얻고 싶다면 현재 슬라이드에 클래스를 추가하거나 현재 슬라이드 인덱스를 액세스 가능한 변수에 저장합니다. 이 방법을 사용하면 현재 슬라이드의 색인을 찾아 해당 슬라이드의 alt 태그를 가져올 수 있습니다. 더 정확한 정보가 없으면 내가 얻을 수있는만큼 정확합니다.

Answer 2

이렇게하면됩니다.

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