javascript - 使用按钮刷新任意图像

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/