javascript - 替换背景图像 URL 中的文本

Question

简化后，我有这样的结构:

<div id="RelatedPosts1">
    <div class="related-posts-thumb" style="background: url(http://xxxxxxx/s72-c/image-1.jpg)"></div>
    <div class="related-posts-thumb" style="background: url(http://xxxxxxx/s72-c/image-2.jpg)"></div>
    <div class="related-posts-thumb" style="background: url(http://xxxxxxx/s72-c/image-3.jpg)"></div>
</div>

我想用“s320”替换“s72-c”。因此，改变图像的大小。

这是我用 jQuery 尝试过的:

<!-- Let's replace low-res with a higher-res -->
$(".related-posts-thumb").text(function () {
    return $(this).text().replace("s72-c", "s320"); 
});

我猜这是行不通的，因为图像 URL 不在元素“内部”。所以我不确定如何达到我想要的效果。我不是 javascript/jQuery 专家，我还没有看到任何示例解决与我正在尝试做的事情类似的问题。

Answer 1

不太确定您希望它何时触发，所以我将其设置为点击...

 $('.related-posts-thumb').each(function() {
     $(this).attr("style", $(this).attr("style").replace("s72-c", "s320"));
 });

JSFiddle示例(点击背景):

http://jsfiddle.net/wdc6ydtk/1/