लिंक छवि पर काम नहीं कर रहा है?

Question

मैं एक प्रभाव बनाने का प्रयास कर रहा हूं जहां कोई उपयोगकर्ता किसी छवि पर क्लिक करता है, उस छवि को दूसरी छवि द्वारा प्रतिस्थापित किया जाता है जो एक लिंक के रूप में भी कार्य करता है।

हालांकि मेरी समस्या यह है कि जब भी मैं प्रतिस्थापित छवि पर क्लिक करता हूं, तो लिंक काम नहीं करता है।

फिडल: 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

यहाँ एक उदाहरण है।

example

एचटीएमएल हिस्सा

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

ऐड डेटा-नई छवि पर छवि के नए यूआरएल के साथ विशेषता और जे एस के साथ बदलने

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

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

Answer 2

मैं एक पूरी तरह से अलग दृष्टिकोण का प्रयोग करेंगे , लेकिन यहां आपके पास पहले से मौजूद कोड के साथ ऐसा करने का तरीका है:

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

मैं जानबूझकर toggle() का उपयोग नहीं किया बेहतर तकनीक को दिखाने के लिए, यदि आप क्लिक करें घटना बंद करने के लिए जब क्लिक छवि आदि प्रकट होता है

Answer 3

img टैग href गुण होते हैं नहीं करना चाहती हूँ। आपको छवि को एंकर में लपेटने और उस पर यूआरएल असाइन करने की आवश्यकता है, या कस्टम रीडायरेक्ट करना है।

अपनी छवि एचटीएमएल सूचना तत्व का निरीक्षण पर:

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

यह मान्य नहीं है क्योंकि imgs एंकर नहीं हैं!

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

(मैं एक बेला करने की कोशिश की लेकिन यह नहीं बचा होगा, लेकिन यह काम करना चाहिए)

आप कार्यों में अपने कार्यों को स्टोर करने के ताकि आप अगर हो जरूरत वापस कर सकते हैं की जरूरत है। पहली कार्रवाई स्रोत बदलती है, फिर ईवेंट को एक लिंक की तरह रीडायरेक्ट करने के लिए बदलें।