使用 ajax 和 jquery 替换图像 src

Question

在我的应用程序中，我有一个包含大量图像的网页，其源 URL 是通过向 rails 服务器发出 get 请求动态生成的，最初将默认图像分配给源。加载页面后，我向服务器发出请求，返回带有新图像 URl 的 json，然后需要更新该图像的 src。以下是我在 html.erb 中使用的代码

<div class="inner">
 <div class="span9 blog-head alert alert-info"><h3><%=@feeds.title%></h3></div>
 <%@feeds.entries.each do|feed|%>
  <div class="thumbnail feeds span6">
   <div class="row title lead">
     <span class="span6"><%=link_to feed.title,feed.url,target: "_blank"%></span>
   </div>
   <div class="row content">
     <input type="hidden" class="image-feed-url" value="<%=feed.entry_id%>">
     <!-- need to update src of following img tag -->
     <img class="span2 desc-img thumbnail" src="/assets/default.jpg" alt="RSS">
     <span class="span3"><%=feed.summary%></span>
   </div>
   <div class="row footer">
     <%if feed.published%>
      <span class="span3">Published on: <small><%=feed.published.to_date.strftime("%b, %-d, %Y")%></span></small>
     <%end%>
     <span class="span2 source">Source: <small><%=link_to 'Click here',@feeds.url, target: "_blank"%></span></small>
   </div>
 </div>
 <%end%>
</div>

需要更新具有类“desc-img”的“img”标签中的src。在我的 JS 文件中

$(document).ready(function(){
  all_feeds = $('.inner .feeds')
  for(i=0;i<all_feeds.length;i++)
  {
    element = all_feeds[i]
    feed_url = $(element).find('.image-feed-url').val()
    $.getJSON("/get_image_url?feed_url="+feed_url,function(data){
      // data['link] is the actual image link returned by server
      $(element).find('.desc-img').attr('src',data['link']);
    });
  }
});

我也尝试过使用带有背景图像的 div 而不是 img 标签并在 JS 中更新 div 的背景图像，但没有任何效果。我是 Jquery 和 Ajax 的新手，任何帮助将不胜感激。

Answer 1

试试这个：

$.getJSON("/get_image_url?feed_url="+feed_url,function(data){
      $(element).find('.desc-img').removeAttr('src');
      $(element).find('.desc-img').attr('src', '../' + data['link'] + '?' + Math.random());
});

希望这会有所帮助。