استخدام .getJSON لإرجاع الصور ثم لفها في نقاط ارتساء
سؤال
ما هي أسهل طريقة لربط المرساة باستخدام img src مثل href في هذا الكود؟:
$(function(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=tree&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i, item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if (i == 3)
return false;
});
});
});
سيكون أمرًا رائعًا أن يبدو كود HTML الناتج كما يلي:
<div id="images">
<a href="...888_m.jpg"><img src="...888_m.jpg"></a>
<a href="...373_m.jpg"><img src="...373_m.jpg"></a>
<a href="...a17_m.jpg"><img src="...a17_m.jpg"></a>
<a href="...c51_m.jpg"><img src="...c51_m.jpg"></a>
</div>
إليكم ما توصلت إليه حتى الآن:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<title>JSON Example</title>
<script type="text/javascript" src= "http://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript">
$(function(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=tree&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i, item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if (i == 3)
return false; //return 4 images then stop
});
var imgs = document.getElementsByTagName("img"); //build imgs array
for (var i=0; i<imgs.length; i++) {
source = imgs[i].getAttribute("src"); // grabs the img src attributes
//build anchors with attributes href and title
$("<a>").attr({
href: source,
title: "Courtesy of Flicker"
}).appendTo("#images"); //injects anchors into "images" div
/**********************
then I'm stuck. Although everything so far is working,
I need to rewrite the code inserted into the DOM at this point
so that the images are wrapped by the anchors.
**********************/
};
});
});
</script>
<style type="text/css">
img {
height: 100px;
}
</style>
</head>
<body>
<div id="images"> </div>
</body>
</html>
أيه أفكار؟
المحلول
$.each(data.items, function(i, item){
var img = $("<img/>").attr("src", item.media.m);
$("<a/>").attr({href: item.media.m, title: "Courtesy of Flicker"})
.append(img).appendTo("#images");
});
نصائح أخرى
لماذا يجب دائمًا أن تكون بطانة واحدة؟
$.each(data.items, function(i, item){
var image = $("<img/>").attr("src", item.media.m);
var link = $("<a>").attr("href", item.media.url);
link.append(image);
$("#images").append(link);
}
رائع!كان ذلك سريعًا يا شباب!لقد أجبت بالفعل على سؤالي بعد أن طرحته.بطانة واحدة.وهنا ما توصلت إليه:
$.each(data.items, function(i, item){
$("<img/>").attr("src", item.media.m).appendTo("#images").wrap($("<a/>").attr("href", item.media.m));
});
شكرًا.ما لم تكن هناك مشكلات في الأداء لست على علم بها، سأستخدم إجابتي.
لا تنتمي إلى StackOverflow