将 href 部分替换为 jQuery

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 提要（link 位于代码片段的底部），它只提供 link 到 "m" 后缀。我对更改 JSON 提要的内容以包含其他后缀不感兴趣，而是使用 jQuery 调整我检索到的 URL 以将“_m”后缀替换为“ _c”后缀。

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

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

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

P.S。我只有 jQuery 的基本知识，所以如果您能提供详尽的答案或者甚至编辑我在上面提供的带有更正代码的 jsbin link，我会很高兴。谢谢！

Answer 1

您可以在将图像分配给 link 之前替换 _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>

将 href 部分替换为 jQuery

Replace section of href with jQuery

html

url

jquery

flickr

image