如何在更新後刷新特定圖像？

Question

我有幾個具有唯一ID的div標籤，並且在特定圖像的點擊事件之後，我正試圖刷新它。我怎樣才能做到這一點？這就是我對到目前爲止的代碼：

HTML：

<div class="photo_gallery_container" <?php echo($div_id); ?>> 
    <table class="table table-bordered table-condensed"> 
     <thead > 
      <tr style="background-color: #f5f5f5;"> 
       <th colspan="2" style="text-align: right;"><span style="cursor:pointer" id="delimg_<?php echo($id); ?>" class="delimg"><span class="label label-important">Delete</span></span></th> 
      </tr>    
     </thead> 
     <tbody> 
      <tr> 
       <td> 
        <img src="<?php echo($url['url'])?>" style="height:120px;"/> 
       </td> 
       <td> 
        <a href="#" id="rotateimg_<?php echo($id); ?>" class="rotateimg">Rotate</a> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

我對旋轉click事件看起來是這樣的：

$('.rotateimg').click(function(e) { 
    e.preventDefault(); 
    var id = $(this).attr('id').substr(10); 

    $.post("/functions/photo_functions.php", { f: 'rotate', imgid: id }, function(status){ 

     if (status == 'true') { 

      // How can I reload the specific image after being rotated 

     } 
    }); 

});    

Answer 1

查詢字符串就追加到img的網址（例如?v=1），這將愚弄瀏覽器認爲它是一個新的圖像。

下面是一個例子（假設id是圖像的頁面上的ID）：

$('#' + id).prop('src', function(i, v) 
{ 
    var separator = v.indexOf('?') == -1 ? '?' : '&'; 

    return v + separator + 'v=' + (new Date()).getTime(); 
}); 

---

因爲它出現在您img在頁面上沒有ID，你可以遍歷DOM尋找它如下所示：

$(this).parent().prev().find('> img') 

Answer 2

插件怎麼樣？

$.fn.refresh(function() { 
    return this.each(function() { 
    var $this = $(this); 
    var source = $this.data('orig-src'); 
    var timestamp = (new Date()).getTime(); 

    if (!source) { 
     $this.data('orig-src', $this.prop('src')); 
     source = $this.data('orig-src'); 
    } 

    if (source.indexOf('?') != -1) { 
     $this.prop('src', source + '&t=' + timestamp) 
    } else { 
     $this.prop('src', source + '?t=' + timestamp) 
    } 
    }); 
}); 

現在，你可以把它叫做一個<img />標籤：

$('img.foo').refresh();