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>

我希望将“s72-c”替换为“s320”。因此，改变图像的大小。

这是我尝试使用jQuery：

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

我猜这不起作用，因为图片网址不在元素的“内部”。所以我不确定如何达到我想要的效果。我不是一个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/

Answer 2

您可以使用.css() method with the function parameter option

$('.related-posts-thumb').css("background-image",function(idx,current){
    return current.replace('s72-c','s320');         
 });

替换背景图像URL中的文本

2 个答案: