Sostituisci dinamicamente la sorgente di immagini con jQuery

Sto cercando di sostituire l'immagine di classificazione a stelle di Yelp predefinita per le attività commerciali con una delle mie. Per fare ciò ho bisogno di trovare la fonte d'immagine corrispondente per ognuna delle 5 possibili immagini che potrebbero essere caricate. E poi, sulla base di questo ho bisogno di caricare l'immagine corretta che ho creato.Sostituisci dinamicamente la sorgente di immagini con jQuery

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

Quindi, Yelp stelle-1.png sarebbe sostituito con il mio stelle-1.png. Così via. Questo è probabilmente piuttosto semplice, ma sono nuovo di jQuery e tutto ciò che ho trovato non ha funzionato correttamente. La tua esperienza è molto apprezzata!

fonte

2012-06-21 David Hubler

C'è una logica tra il nome del file da sostituire e il nome del file sostitutivo? – ChrisW

Sembra che tu stia cercando di scoprire quale sia il punteggio di Yelp per impostare quale dovrebbe essere la tua immagine. Se è così, penso che sia necessario esaminare la loro API: http://www.yelp.com/developers/documentation/v2/overview –

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

EDIT

Penso che tu stai chiedendo come sostituire dinamicamente lo src in base a quello che c'è attualmente. Quindi, se c'è qualche differenza diretta nelle stringhe, magari provare

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

fonte

2012-06-21 00:27:42 JeremyWeir

La parte più difficile per me è che devo usare my-star-1, my -star-2, my-star-3, my-star-4 o my-star-5 in base all'immagine caricata da Yelp. Ho difficoltà a sapere come trovare l'immagine guasta che viene caricata in modo da poterla sostituire con l'immagine corretta. –

Stai chiedendo come eseguire la sostituzione delle stringhe? Non sei molto chiaro. – JeremyWeir

Sembra che non conosca i nomi dei file img di yelp ... Usa firebug per ispezionarli? O di fatto la maggior parte dei browser ora? –

Se si sta solo cercando di fare sostituire una base senza alcun modello:

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

Questo potrebbe essere utilizzato con le immagini che hanno una src attribuire a cominciare 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")); 
});

fonte

2012-06-21 00:41:38 GrayB

@GrayB mi ha dato una buona soluzione - questo non richiede di conoscere l'img src assoluta:

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

fonte

2013-10-12 15:32:25

Sostituisci dinamicamente la sorgente di immagini con jQuery

risposta

Problemi correlati