2012-06-21 16 views
7

Estoy tratando de reemplazar la imagen de calificación de estrellas predeterminada de Yelp para las empresas con una propia. Para hacerlo, necesito encontrar la fuente de imagen correspondiente para cada una de las posibles 5 imágenes que podrían haberse cargado. Y luego, basado en eso, necesito cargar la imagen adecuada que he creado.Reemplace dinámicamente la fuente de imagen con jQuery

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

Así, grito estrellas-1.png sería reemplazado con mi-estrella-1.png. Y así sucesivamente. Esto es probablemente bastante simple, pero soy nuevo en jQuery y todo lo que he encontrado no funcionó correctamente. ¡Su experiencia es muy apreciada!

+0

¿Existe alguna lógica entre el nombre del archivo que se va a reemplazar y el nombre del archivo de reemplazo? – ChrisW

+1

Parece que está tratando de encontrar cuál es la puntuación de Yelp para establecer cuál debería ser su imagen. Si es así, creo que debes consultar su API: http://www.yelp.com/developers/documentation/v2/overview –

Respuesta

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

EDITAR

pienso que usted está preguntando cómo reemplazar dinámicamente el src basada en lo que es actualmente existe. Así que si hay alguna diferencia directa en cadenas, tal vez tratar

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

La parte más difícil para mí es que tengo que usar my-star-1, my -star-2, my-star-3, my-star-4 o my-star-5 según la imagen que se carga desde Yelp. Me está costando saber cómo encontrar la imagen que se carga y así poder reemplazarla con la imagen correcta. –

+2

¿Estás preguntando cómo hacer el reemplazo de cadena? No estás siendo muy claro. – JeremyWeir

+1

Parece que no sabe los nombres de los archivos yelp img ... ¿Usar firebug para inspeccionarlos? ¿O de hecho la mayoría de los navegadores ahora? –

4

Si usted está tratando de hacer reemplazar un básico sin ningún patrón:

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

Esto podría ser utilizado con imágenes que tienen una src atribuir a partir de 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")); 
}); 
4

@GrayB me dio una buena solución - esto no requiere a conocer los img src absoluta:

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