Javascript 使用按钮刷新任意图像

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

我很容易添加一个按钮：

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

但是，我不能这样做，因为这里$（this）不引用匹配的图像，而且我无论如何也不能在这个jquery匹配中执行拆分操作

我该怎么做

作为一个奖励如果任何人有一个体面的自动刷新图像代码的参考，这将是有益的

---

这建立在一个更简单的SO查询之上。

遍历集合：

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

---

您可以使用新的尾部参数单独生成一个变量，如：

$(".refresh-image-button").click(function() {
    var newAttr = $('img[src*="/thumbs/"]').attr("src").split("?")[0] + "?ver=" + new Date().getTime();
    $('img[src*="/thumbs/"]').attr("src", newAttr);
});

---

参见

我最终做了一些几乎完全像@Moogs answer这样的事情

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);
    });
}

addRefreshButtons（）；
//细节
函数addRefreshButtons（）{
//将刷新按钮添加到图像预览
$（“div.refresh-image”）.remove（）；
$（'a[href*=“/thumbs/“]'）。在（'Refresh'）之后；
//将刷新器连接到按钮
$（“.refresh image button”）。单击（函数（）{
刷新缩略图（）；
});
}
函数刷新缩略图（）{
$（'img[src*=“/thumbs/”]）。每个（函数（）{
var src=$（this.attr（'src'）；
var newSrc=src.split（“？”，1）+“？”+Date.now（）
$（this.attr（'src'，newSrc）；
});
}

请用相关（可能是样本）标记发布您的代码。

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);
    });
}