Liên kết không hoạt động trên hình ảnh?

Question

Tôi đã cố gắng tạo hiệu ứng khi người dùng nhấp vào một hình ảnh, hình ảnh đó được thay thế bằng một hình ảnh khác cũng hoạt động như một liên kết.

Tuy nhiên, vấn đề của tôi là bất cứ khi nào tôi nhấp vào hình ảnh được thay thế, liên kết sẽ không hoạt động.

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

đây là một ví dụ.

example

phần html

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

add dữ liệu mới thuộc tính trên hình ảnh với url mới của hình ảnh và thay thế bằng js

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

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

Answer 2

Tôi sẽ sử dụng một cách tiếp cận hoàn toàn khác nhau , nhưng dưới đây là cách thực hiện điều đó với mã bạn đã có:

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

Tôi cố tình không sử dụng toggle() để hiển thị tốt hơn kỹ thuật này, trong trường hợp bạn muốn biến sự kiện click tắt khi hình ảnh nhấp xuất hiện, vv

Answer 3

img thẻ không có href tài sản. Bạn cần phải bọc hình ảnh trong một neo và gán url cho điều đó hoặc thực hiện chuyển hướng tùy chỉnh.

Chú html hình ảnh của bạn về thanh tra của nguyên tố:

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

Đây là không hợp lệ vì imgs không neo!

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

(tôi đã cố gắng để thực hiện một fiddle nhưng nó sẽ không tiết kiệm, nhưng điều này nên làm việc)

Bạn cần lưu trữ hành động của bạn trong các chức năng để bạn có thể trở lại nếu cần thiết. Hành động đầu tiên là thay đổi nguồn, sau đó thay đổi sự kiện để chuyển hướng bạn như một liên kết.