用 jQuery 动态替换图像源答案

【问题标题】：Dynamically replace image source with jQuery用 jQuery 动态替换图像源
【发布时间】：2012-06-23 04:57:29
【问题描述】：

我正在尝试用我自己的一张图片替换默认的 Yelp 星级图片。为此，我需要为可能已加载的 5 个图像中的每一个找到相应的图像源。然后，基于此，我需要加载我创建的正确图像。

<div id="starRating">
    <img src="http://yelp-star-1.png"/>
</div>

因此，yelp-star-1.png 将被替换为 my-star-1.png。等等等等。这可能很简单，但我是 jQuery 新手，我发现的所有东西都不能正常工作。非常感谢您的专业知识！

【问题讨论】：

要替换的文件名和替换文件名之间有逻辑吗？
听起来您正在尝试查找 Yelp 分数来设置您的图像应该是什么。如果是这样，我认为您需要查看他们的 API：yelp.com/developers/documentation/v2/overview

【解决方案1】：

$("#starRating img").attr("src", "http://pathto/my-star-1.png")

编辑

我认为您是在询问如何根据当前的内容动态替换 src。所以如果字符串有一些直接的区别，也许可以试试

var img = $("#starRating img");
img.attr("src", img.attr("src").replace("yelp", "my"));

【讨论】：

对我来说棘手的部分是我必须使用基于 my-star-1、my-star-2、my-star-3、my-star-4 或 my-star-5在从 Yelp 加载的图像上。我很难知道如何找到加载的 yelp 图像，以便我可以用正确的图像替换它。
您是在问如何进行字符串替换？你不是很清楚。
听起来他不知道 yelp img 文件的名称... 使用 firebug 检查它们？或者实际上现在的大多数浏览器？

【解决方案2】：

如果您只是尝试在没有任何模式的情况下进行基本替换：

$('img[src="http://website.com/images/yelp-star-1.png"]').attr('src','http://website.com/images/my-star-1.png');

这可以用于具有以http://website.com/images/yelp-star- 开头的 src 属性的图像

$('img[src^="http://website.com/images/yelp-star-"]').each(function() {
   $(this).attr('src', $(this).attr('src').replace("yelp", "my"));
});

【讨论】：

【解决方案3】：

@GrayB 给了我一个很好的解决方案——这不需要你知道绝对的 img src：

jQuery('.element img').each(function() {
    jQuery(this).attr('src', jQuery(this).attr('src').replace("find_", "replace_"));
});

【讨论】：