Question

我一直在寻找答案，但没有发现任何符合我特殊情况的内容。

我可以在此处找到我正在处理的一个精简示例：http://jsbin.com/qujojuriri/1/edit?html,js,output

所以我正在构建一个使用Flickr JSON提要从我的帐户中检索图像的图库，因此为了更新我网站上的图库，我只需要将图像上传到带有特定标记的Flickr。

$(document).ready(function() {
    $.getJSON(
        "http://api.flickr.com/services/feeds/photos_public.gne?id=125573694@N07&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/photos_public.gne?id=125573694@N07&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提要（链接位于代码片段的底部），它只提供指向“m”后缀的链接。我不想更改JSON提要的内容以包含其他后缀，而是使用jQuery调整我检索到的URL以用“_c”后缀替换“_m”后缀。

我尝试在我的初始jQuery之后添加以下代码来执行此操作，但它没有做任何事情。

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

总结：现在，当我点击我从JSON提要中检索到的图像时，它会打开带有“_m”后缀的URL，我想使用jQuery将其更改为“_c”。谢谢！

P.S。我只掌握jQuery的基本知识，所以如果你能提供全面的答案，甚至可能编辑我上面提供的jsbin链接和更正后的代码，我都会喜欢它。谢谢！

Answer 1

您可以在为图像指定链接之前替换_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/photos_public.gne?id=125573694@N07&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>

用jQuery

1 个答案: