jQuery Zastąp tekst elementu na hover

Question

Z jQuery, próbuję zastąpić tekst, w tym zakres, wewnątrz tych linków po najechaniu kursorem. Następnie, gdy wskaźnik myszy jest wyłączony, oryginalny tekst jest wyświetlany ponownie.

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

Wyjście końcowe powinno być

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

Ja toying wokół z, ale nie wiem, jak zastąpić go z powrotem. Jakieś pomysły?

$('.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')); 
    } 
); 

można zaoszczędzić oryginalny tekst w atrybucie data-initialText przechowywanych w węźle sama tak aby uniknąć zmiennych

Answer 2

To powinno załatwić sprawę

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

You” Musimy przechowywać go w zmiennej, aby przywrócić ją do stanu sprzed próby: spróbuj:

var text; 

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

Answer 5

dodać kolejną funkcję do zdarzenia najechania tak:

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

Link na demo