jQuery jQuery के साथ होवर

Question

पर तत्व के टेक्स्ट को प्रतिस्थापित करें, मैं होवर पर इन लिंक के अंदर, अवधि सहित पाठ को प्रतिस्थापित करने का प्रयास कर रहा हूं। फिर जब उपयोगकर्ता होवर बंद हो जाता है, तो मूल पाठ फिर से प्रदर्शित होता है।

<a class="btn" href="#"> 
    <img src="#" alt=""/> 
    <span>Replace me</span> please 
</a> 

<a class="btn" href="#"> 
    <img src="#" alt=""/> 
    <span>Replace me</span> please 
</a> 

अंतिम आउटपुट

<a class="btn" href="#"> 
    <img src="#" alt=""/> 
    I'm replaced! 
</a> 

होना चाहिए मैं चारों ओर के साथ कर रही हूँ लेकिन यकीन है कि कैसे इसे वापस बदलने के लिए नहीं। कोई विचार?

$('.btn').hover(function(){ 
    $(this).text("I'm replaced!"); 
}); 

Answer 1

$('.btn').hover(
    function() { 
     var $this = $(this); // caching $(this) 
     $this.data('initialText', $this.text()); 
     $this.text("I'm replaced!"); 
    }, 
    function() { 
     var $this = $(this); // caching $(this) 
     $this.text($this.data('initialText')); 
    } 
); 

आप एक data-initialText विशेषता नोड में संग्रहीत में मूल पाठ को बचा सकता है अपने आप में इतना चर

Answer 2

इस चाल करना चाहिए से बचने के लिए

$(function(){ 
    var prev;  

    $('.btn').hover(function(){ 
    prev = $(this).text(); 
     $(this).text("I'm replaced!"); 
    }, function(){ 
     $(this).text(prev) 
    }); 
}) 

Answer 3

$('.btn').hover(function() { 
    // store $(this).text() in a variable  
    $(this).text("I'm replaced!"); 
}, 
function() { 
    // assign it back here 
}); 

Answer 4

आप ' इसे एक वैरिएबल में स्टोर करने की आवश्यकता है ताकि इसे वापस सेट किया जा सके, कोशिश करें:

var text; 

$(".btn").hover(function() { 
    text = $(this).text(); 
    $(this).text("I'm replaced!"); 
}, 
function() { 
    $(this).text(text); 
}); 

Answer 5

इस तरह मंडराना घटना के लिए एक और समारोह जोड़ें:

$('.btn').hover(function(){ 
    $(this).text("I'm replaced!"); 
}, function() { 
    $(this).text("Replace me please"); 
}); 

Link डेमो