I'm trying to replace the default Yelp star rating image for businesses with one of my own. To do so I need to find the corresponding image source for each of the possible 5 images that could have loaded. And then, based on that I need to load in the proper image I've created.
<div id="starRating">
<img src="http://yelp-star-1.png"/>
</div>
So, yelp-star-1.png would be replaced with my-star-1.png. So on and so forth. This is probably pretty simple, but I'm new to jQuery and everything I've found has not worked properly. Your expertise is very much appreciated!
$("#starRating img").attr("src", "http://pathto/my-star-1.png")
EDIT
I think that you're asking how to dynamically replace the src based on what is there currently. So if there is some direct difference in strings, maybe try
var img = $("#starRating img");
img.attr("src", img.attr("src").replace("yelp", "my"));
If you are just trying to do a basic replace without any pattern:
$('img[src="http://website.com/images/yelp-star-1.png"]').attr('src','http://website.com/images/my-star-1.png');
This could be used with images who have a src attribute starting with http://website.com/images/yelp-star-
$('img[src^="http://website.com/images/yelp-star-"]').each(function() {
$(this).attr('src', $(this).attr('src').replace("yelp", "my"));
});
@GrayB gave me a good solution - this does not require you to know the absolute img src:
jQuery('.element img').each(function() {
jQuery(this).attr('src', jQuery(this).attr('src').replace("find_", "replace_"));
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With