Il mio DOM è simile a questo:
Quando qualcuno fa clic su un’immagine, voglio che l’immagine src cambi in
dove x
rappresenta il numero dell’immagine 1 o 2.
È ansible o devo usare i CSS per cambiare le immagini?
Puoi usare la funzione attr () di jQuery. Ad esempio, se il tag img ha un attributo id di “my_image”:

Quindi puoi cambiare lo src in jQuery tramite:
$("#my_image").attr("src","second.jpg");
Per albind questo a un evento click
, puoi scrivere:
$('#my_image').on({ 'click': function(){ $('#my_image').attr('src','second.jpg'); } });
Per ruotare l’immagine, puoi fare questo:
$('img').on({ 'click': function() { var src = ($(this).attr('src') === 'https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery/img1_on.jpg') ? 'https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery/img2_on.jpg' : 'https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery/img1_on.jpg'; $(this).attr('src', src); } });
Uno degli errori più comuni che si fanno quando si cambia la sorgente dell’immagine non è aspettare che il caricamento dell’immagine .load()
azioni successive come la maturazione delle dimensioni dell’immagine ecc. Sarà necessario usare il metodo jQuery. .load()
per fare cose dopo il caricamento dell’immagine.
$('yourimageselector').attr('src', 'newsrc').load(function(){ this.width; // Note: $(this).width() will not work for in memory images });
Motivo della modifica: https://stackoverflow.com/a/670433/561545
Per maggiori informazioni. Provo a impostare l’attributo src con il metodo attr in jquery per l’immagine dell’annuncio usando la syntax ad esempio: $("#myid").attr('src', '/images/sample.gif');
Questa soluzione è utile e funziona, ma se il cambiamento del percorso cambia anche il percorso dell’immagine e non funziona.
Ho cercato di risolvere questo problema ma non ho trovato nulla.
La soluzione sta mettendo il \ “all’inizio del percorso: $("#myid").attr('src', '\images/sample.gif');
Questo trucco è molto utile per me e spero che sia utile per gli altri.
Ti mostrerò come modificare l’immagine src
, in modo che quando fai clic su un’immagine ruoti attraverso tutte le immagini che sono nel tuo codice HTML (nella class d1
id e c1
particolare) … se hai 2 o più immagini nel tuo HTML.
Ti mostrerò anche come pulire la pagina dopo che il documento è pronto, in modo che inizialmente venga visualizzata solo un’immagine.
Il codice completo
$(function() { var $images = $("#d1 > .c1 > a").clone(); var $length = $images.length; var $imgShow = 0; $("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); $("#d1 > .c1 > a").click(function(event) { $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") ); event.preventDefault(); }); });
La rottura
Creare una copia dei collegamenti contenenti le immagini (nota: si potrebbe anche utilizzare l’attributo href dei collegamenti per funzionalità aggiunte … ad esempio visualizzare il link di lavoro sotto ogni immagine ):
var $images = $("#d1 > .c1 > a").clone(); ;
Controlla quante immagini erano nell’HTML e crea una variabile per tracciare quale immagine viene mostrata:
var $length = $images.length; var $imgShow = 0;
Modifica l’HTML del documento in modo che venga mostrata solo la prima immagine. Elimina tutte le altre immagini.
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") );
Associare una funzione da gestire quando si fa clic sul collegamento dell’immagine.
$("#d1 > .c1 > a").click(function(event) { $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") ); event.preventDefault(); });
Il cuore del codice precedente utilizza ++$imgShow % $length
per scorrere l’object jQuery contenente le immagini. ++$imgShow % $length
prima aumenta il nostro contatore di uno, quindi modifica quel numero con quante immagini ci sono. Ciò manterrà l’indice risultante in ciclo da 0
a length-1
, che sono gli indici dell’object $images
. Ciò significa che questo codice funzionerà con 2, 3, 5, 10 o 100 immagini … scorrendo ciclicamente ciascuna immagine in ordine e riavviandola alla prima immagine quando viene raggiunta l’ultima immagine.
Inoltre, .attr()
viene utilizzato per ottenere e impostare l’attributo “src” delle immagini. Per selezionare elementi dall’object $images
, ho impostato $images
come contesto jQuery utilizzando il modulo $(selector, context)
. Quindi uso .eq()
per selezionare solo l’elemento con l’indice specifico a cui sono interessato.
È inoltre ansible memorizzare i src
in una matrice.
esempio jsFiddle con 3 immagini
Ed ecco come incorporare gli hrefs dai tag di ancoraggio attorno alle immagini:
esempio jsFiddle
Se non ci sono solo jQuery o altri sistemi di distruzione delle risorse – molti kb da scaricare ogni volta da ciascun utente solo per un semplice trucco – ma anche JavaScript nativo (!):

Questo può essere scritto in generale e più elegante:
Puoi farlo anche con jQuery in questo modo:
$(".c1 img").click(function(){ $(this).attr('src','/new/image/src.jpg'); });
È ansible avere una condizione se ci sono più stati per l’origine dell’immagine.
Ho avuto lo stesso problema quando provavo a chiamare il pulsante re captcha. Dopo qualche ricerca, ora la funzione qui sotto funziona bene in quasi tutti i browser famosi (Chrome, Firefox, IE, Edge, …):
function recaptcha(theUrl) { $.get(theUrl, function(data, status){}); $("#captcha-img").attr('src', ""); setTimeout(function(){ $("#captcha-img").attr('src', "captcha?"+new Date().getTime()); }, 0); }
‘theUrl’ è usato per rendere la nuova immagine captcha e può essere ignorata nel tuo caso. Il punto più importante è la generazione di un nuovo URL che costringe FF e IE a rieseguire l’immagine.
Ho lo stesso stupore oggi, l’ho fatto in questo modo:
//
$('.myClass').attr('src','').promise().done(function() { $(this).attr('src','img/new.png'); });
Spero che questo possa funzionare
$(document).ready(function(){ var flag = 0; $("button#changeSize").click(function(){ if(flag == 0) { $("#dummyimage").attr("src","http://dummyimage.com/250x155/"); flag = 1; } else if(flag == 1) { $("#dummyimage").attr("src","http://sofit.miximages.com/image/.png"); flag = 0; } }); });
Non c’è modo di cambiare la fonte dell’immagine con i CSS.
L’unico modo ansible è usare Javascript o qualsiasi libreria Javascript come jQuery .
Le immagini sono all’interno di un div e non ci sono class
o id
con quell’immagine.
Quindi la logica selezionerà gli elementi all’interno del div
cui si trovano le immagini.
Quindi seleziona tutti gli elementi delle immagini con loop e cambia l’immagine src con Javascript / jQuery .