Link non funziona sull'immagine?

Question

Ho tentato di creare un effetto in cui un utente fa clic su un'immagine, quell'immagine viene sostituita da un'altra immagine che funge anche da collegamento.

Tuttavia il mio problema è che ogni volta che faccio clic sull'immagine sostituita, il collegamento non funziona.

Fiddle: http://jsfiddle.net/ha6qp7w4/321/

$('.btnClick').on('click',function(){ 
    $(this).attr('src','https://placekitten.com/g/200/300') 
    $(this).attr('href','google.com') 
}); 

Answer 1

ecco un esempio.

example

parte html attributo data-nuovo

<img src="http://i.imgur.com/o46X87d.png" data-new="http://i.imgur.com/9lf2Mjk.png" id="1" class="btnClick" /> 

aggiuntivo sull'immagine con il nuovo URL dell'immagine e sostituirlo con js

$('.btnClick').on('click',function(){ 
    var url = $(this).attr("data-new"); 

    $(this).attr("src", url); 
}); 

Answer 2

avrei usato un approccio totalmente diverso , ma ecco come farlo con il codice che hai già:

<div class="btnClick"> 
<img src="http://i.imgur.com/o46X87d.png" id="1" /> 
<a href="javascript:check()" id="2" style="display:none;"> 
    <img src="http://i.imgur.com/9lf2Mjk.png" id="static" /> 
</a> 
</div> 

<script type="text/javascript"> 
$('.btnClick').on('click',function(){ 
    if($('#1').is(':visible')) { 
     $('#1').hide(); 
     $('#2').show(); 
    } else { 
     $('#1').show(); 
     $('#2').hide(); 
    } 
}); 
</script> 

Ho volutamente non ho usato toggle() per mostrare meglio la tecnica, nel caso che ci si vuole trasformare l'evento click quando l'immagine viene visualizzata cliccando ecc

Answer 3

img tag non hanno href proprietà. È necessario avvolgere l'immagine in un'ancora e assegnare l'URL a quello o eseguire un reindirizzamento personalizzato.

notare il vostro html immagine sul controllo delle elemento:

<img src="https://placekitten.com/g/200/300" id="1" class="btnClick" href="google.com"> <!-- not valid! --> 

Questo non è valido perché imgs non sono ancore!

function first() { 
    this.src = 'https://placekitten.com/g/200/300'; 
    $(this).unbind("click"); 
    $(this).on("click", second); 
} 

function second() { 
    window.location.href = "https://www.google.com"; 
    $(this).unbind("click"); 
    $(this).on("click", first); 
} 

$('.btnClick').on('click', first); 

(ho provato a fare un violino ma non sarebbe salva, ma questo dovrebbe funzionare)

È necessario memorizzare le azioni nelle funzioni in modo da poter ripristinare in caso di necessità. La prima azione è cambiare la sorgente, quindi modificare l'evento per reindirizzare come un link.