Question

我有一个自动生成的表单，也可以方便地显示缩略图。我想在图像旁边添加一个按钮，如果它被更新，它将刷新它。我想考虑缓存的图像。

我很容易添加一个按钮：

// add a refresh button to image previews
$('a[href*="/thumbs/"]').after('<div class="refresh-image"><button class="refresh-image-button">Refresh</button></div>');

因为我没关系，如果刷新按钮刷新所有过时的图像，我会尝试将查询字符串附加到图像src（如果存在，则删除旧的查询字符串）：

// attach refresher to button
$(".refresh-image-button").click(function() {
    $('img[src*="/thumbs/"]').attr("src", $(this).attr("src").split('?',1)+'?'+Date.now());
});

但是，我不能真的这样做，因为这里$（this）没有引用匹配的图像，而且我无法在这个jquery匹配中进行拆分操作。

怎么做我这样做？

作为奖励，如果有人有适当的自动刷新图片代码，那将会有所帮助。

这是基于更简单的SO查询here。

Answer 1

遍历集合：

$(".refresh-image-button").click(function() {
    $('img[src*="/thumbs/"]').each(function() {
        $(this).attr("src", $(this).attr("src").split('?',1)+'?'+Date.now());
    });
});

http://jsfiddle.net/g68gxu93/1/

Answer 2

我最终做的事情几乎就像是@Moogs的回答。

addRefreshButtons();

// NICEITIES

function addRefreshButtons() {
  // add a refresh button to image previews
  $("div.refresh-image").remove();
  $('a[href*="/thumbs/"]').after('<div class="refresh-image"><button class="refresh-image-button">Refresh</button></div>');
  // attach refresher to button
  $(".refresh-image-button").click(function() {
      refreshThumbnails();
  });
}

function refreshThumbnails() {
    $('img[src*="/thumbs/"]').each(function() {
        var src = $(this).attr('src');
        var newSrc = src.split('?',1)+'?'+Date.now()
        $(this).attr('src', newSrc);
    });
}

使用按钮刷新任意图像

2 个答案: