Link funktioniert nicht im Image?

Question

Ich habe versucht, einen Effekt zu erstellen, bei dem ein Benutzer auf ein Bild klickt, das Bild wird durch ein anderes Bild ersetzt, das auch als Link fungiert.

Allerdings ist mein Problem, dass, wenn ich auf das ersetzte Bild klicke, der Link nicht funktioniert.

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

hier ist ein Beispiel.

example

html Teil

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

add Daten neues Attribut auf dem Bild mit dem neuen URL der Bild und ersetzen sie durch js

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

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

Answer 2

ich einen völlig anderen Ansatz verwenden würde , aber hier ist, wie Sie das mit dem Code tun, den Sie bereits haben:

<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> 

Ich habe absichtlich nicht toggle() verwenden besser die Technik zu zeigen, falls Sie würde das Click-Ereignis deaktivieren, wenn das Klicken Bild usw. erscheint

Answer 3

img Tags haben keine href Eigenschaften. Sie müssen das Bild in einen Anker einbinden und ihm die URL zuweisen oder eine benutzerdefinierte Weiterleitung durchführen.

Beachten Sie Ihr Bild html auf Inspektion des Elements:

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

Dies ist nicht gültig, da imgs nicht verankert sind!

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); 

(Ich habe versucht, eine Geige zu machen, aber es wäre nicht zu retten, aber diese funktionieren sollte)

Sie müssen Ihre Aktionen in Funktionen speichern, so dass Sie werden müssen, wenn zurückkehren können. Die erste Aktion ist die Änderung der Quelle, dann ändern Sie das Ereignis, um Sie wie einen Link umzuleiten.