Link nie działa na obrazie?

Question

Próbowałem stworzyć efekt, w którym użytkownik klika obraz, zastąpiony przez inny obraz, który również działa jako łącze.

Jednak mój problem polega na tym, że po kliknięciu zastąpionego obrazu łącze nie działa.

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

tutaj jest przykładem.

example

część html

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

dodać dane nowy atrybut na obrazek z nowego adresu URL obrazu i zastąpić go js

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

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

Answer 2

chciałbym użyć zupełnie innego podejścia , ale oto jak to zrobić z kodem, który już masz:

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

Celowo nie używać toggle() aby lepiej pokazać techniki, w przypadku, że chcesz, aby włączyć zdarzenie click wyłączony, gdy obraz pojawia kliknięcie itp

Answer 3

img tagi nie mają href właściwości. Musisz zawinąć obraz w kotwicę i przypisać mu adres URL lub wykonać niestandardowe przekierowanie.

Zauważ swoim dysku html na kontroli elementu:

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

To nie jest ważne, ponieważ imgs nie są kotwice!

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

(próbowałem zrobić skrzypce, ale nie uratuje, ale to powinno działać)

trzeba przechowywać swoje działania w funkcje, dzięki czemu można przywrócić w razie potrzeby. Pierwsza czynność to zmiana źródła, a następnie zmiana zdarzenia, aby przekierować cię jak link.