2016-10-17 7 views
1

답변을 검색했지만 특정 상황에 맞는 것이 없습니다.href의 섹션을 jQuery로 바꿉니다.

A는 내가 일하고 있어요 무엇의 예를 벗었 여기에서 찾을 수 있습니다 : http://jsbin.com/qujojuriri/1/edit?html,js,output

그래서 내가 그 순서에 그래서, 내 계정에서 이미지를 검색 할 플리커 JSON 피드를 사용하는 이미지 갤러리 건물입니다 내 웹 사이트에서 갤러리 업데이트 Flickr에 특정 태그가있는 이미지 만 업로드하면됩니다.

$(document).ready(function() { 
    $.getJSON(
     "http://api.flickr.com/services/feeds/[email protected]&lang=en-us&format=json&jsoncallback=?", { 
     tags: "favorite" 
     }, function(data) { 
      $.each(data.items, function(i, item) { 
       $("<img/>").addClass("class").attr("src", item.media.m).appendTo(
       "#favgallery").wrap(
       "<a href='"+ item.media.m +"' target='_blank'><img src='"+ item.media.m +"'>" 
       ); 
      }); 
    }); 
}); 

//JSON Feed: http://api.flickr.com/services/feeds/[email protected]&lang=en-us&format=json&jsoncallback=? 

Flickr adds a special suffix to the end of each image URL to determine the photo quality. 예를 들어 접미사 "_m"이있는 이미지 URL은 접미사 "_c"가있는 동일한 URL보다 작습니다.

갤러리에서 내 갤러리에 표시 할 축소판 이미지를 하나의 품질로 표시하고 싶지만 그 축소판을 클릭하면 이미지의 고품질 버전이있는 새 탭이 열립니다. 내 문제는 JSON 피드 (링크가 코드 스니 j의 맨 아래에 있음)에서 접미어 "m"에 대한 링크 만 제공한다는 것입니다. JSON 피드의 내용을 다른 접미사를 포함하도록 변경하는 대신 jQuery를 사용하여 "_m"접미어를 "_c"접미어로 바꾸기 위해 검색 한 URL을 조정합니다.

초기 jQuery 다음에이 코드를 추가하려고했지만 아무 것도하지 않았습니다.

$('a').each(function(){ 
    this.href = this.href.replace('_m', '_c'); 
}); 

은 요약하면 : 지금, 나는 내가 JSON 피드에서 검색 한 이미지를 클릭하면, 그것은 "_m"접미사로 URL을 열고, 나는 해당을 변경하는 jQuery를 사용하고 싶습니다 "_기음". 감사!

P. 나는 jQuery에 대한 기본적인 지식 만 갖고 있으므로 철저한 답을 제공 할 수도 있고 위에서 수정 코드로 제공 한 jsbin 링크를 편집 할 수도 있습니다. 감사!

+0

이 같은 시도 :'$ (이) .attr ("HREF", "yourNewInfo을");' – Hackerman

답변

0

이미지를 연결하기 전에 _m을 바꿀 수 있습니다. 코드가 좋아 보인다. 방금 라인을 추가했다.

// use different link for a tags 
var imageLink = item.media.m.replace('_m', '_c'); 

// update div with images 
$("<img/>").addClass("class").attr("src", item.media.m).appendTo("#favgallery").wrap("<a href='" + imageLink + "' target='_blank'>"); 

<img src='"+ item.media.m +"'>도 중복되므로 제거하십시오.

데모 :

$(document).ready(function() { 
 
    $.getJSON(
 
    "https://api.flickr.com/services/feeds/[email protected]&lang=en-us&format=json&jsoncallback=?", { 
 
     tags: "favorite" 
 
    }, 
 
    function(data) { 
 
     $.each(data.items, function(i, item) { 
 

 
     // use different link for a tags 
 
     var imageLink = item.media.m.replace('_m', '_c'); 
 

 
     // update div with images 
 
     $("<img/>").addClass("class").attr("src", item.media.m).appendTo("#favgallery").wrap("<a href='" + imageLink + "' target='_blank'>"); 
 
     }); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="favgallery"></div>

+0

당신은 확실한가요? http://farm6.staticflickr.com/5296/29369593373_8cafa3b716_c.jpg는 오류를주지 않지만 더 큰 이미지를 표시합니다. – user2812130

+0

정말 고마워요 !!!! 완벽하게 작동 :) – user2812130

+0

컴퓨터/인터넷 프리트 하루 종일 ... 작동합니다. 어쨌든 내 대답과 바이올린을 업데이트했습니다. – thekodester