jQuery getJSON调用Flickr API生成文本<a>链接显示[objectObject]求助

嗨，我来帮你搞定这个问题！你遇到的核心问题其实很简单：当你把jQuery对象直接拼进HTML字符串里时，JavaScript会把这个对象转换成默认的字符串表示[object Object]，这就是方法1里链接显示异常的原因。而方法2的重复问题，是因为你用类选择器appendTo('.author-wrap')时，每次循环都会匹配到之前所有创建的同class元素，导致重复添加。

正确的解决思路 #

不要用字符串拼接的方式混合jQuery对象和HTML代码，全程用jQuery的DOM操作方法来构建、组装元素结构——这样既能避免对象转字符串的问题，也能解决重复添加的bug。

修正后的完整代码 #

<div class="container"> 
  <div class="row"> 
    <div id="block" class="col-sm-12"></div> 
  </div> 
</div>

.img-thumbnail{ max-height: 100px; }

(function() { 
  var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 
  $.getJSON( flickerAPI, { 
    tags: "kittens", 
    tagmode: "all", 
    format: "json" 
  }).done(function( data ) { 
    $.each( data.items, function( i, item ) { 
      // 创建外层容器
      var Outer = $('<div class="col-sm-12">'); 
      var Inner = $('<div class="row">').appendTo(Outer); 

      // 构建图片部分（这部分原本就没问题）
      var Img = $('<img class="img-fluid img-thumbnail">').attr('src', item.media.m); 
      var ImgAnchor = $('<a>').attr('href', item.link).append(Img); 
      var ImgDiv = $('<div class="col-sm-3">').append(ImgAnchor); 
      ImgDiv.appendTo(Inner); 

      // 构建文本链接部分
      var AuthorText = "Author..."; 
      var AuthorAnchor = $('<a>').attr('href', item.author).text(AuthorText); // 用text()设置纯文本更简洁

      var LinkText = "Item..."; 
      var LinkAnchor = $('<a>').attr('href', item.link).text(LinkText);

      // 重新构建文本内容的DOM结构（不再用字符串拼接）
      var CopyDiv = $('<div class="col-sm-9">');
      var copyRow = $('<div class="row">').appendTo(CopyDiv);
      
      // 逐个创建列并添加对应内容
      $('<div class="col-sm-3">').append(AuthorAnchor).appendTo(copyRow);
      $('<div class="col-sm-3">').text(item.published).appendTo(copyRow);
      $('<div class="col-sm-3">').append(LinkAnchor).appendTo(copyRow);

      // 组装到页面
      CopyDiv.appendTo(Inner); 
      Outer.appendTo('#block'); 

      // 限制输出数量
      if ( i === 4 ) {return false;} 
    }); 
  }); 
})();

关键修改点说明 #

1. 替换字符串拼接为jQuery DOM操作：原本你通过'<div class="col-sm-3">' + AuthorAnchor + '</div>'的方式拼接，本质是把jQuery对象强制转成了字符串。现在我们先创建空容器，再用append()把链接对象添加进去，就能正确渲染出<a>标签。
2. 用text()设置纯文本更合适：对于不含HTML的纯文本内容，使用text()比append()更直接，还能避免潜在的HTML注入风险。
3. 避免全局类选择器的重复操作：方法2里的appendTo('.author-wrap')会匹配所有已存在的同class元素，导致重复添加。现在每次循环都创建新的专属容器，直接把链接添加到当前循环的容器中，就不会出现重复问题了。

这样修改后，文本链接就能正常显示，也不会有重复输出的问题啦！

内容的提问来源于stack exchange，提问作者redplanet