jQuery가 호버에있는 요소의 텍스트를 바꿉니다.

Question

jQuery를 사용하면 스윙을 포함한 텍스트를 호버의 이러한 링크 내부로 대체하려고합니다. 그런 다음 사용자 호버가 꺼지면 원래 텍스트가 다시 표시됩니다.

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

는 자체가 너무 변수

Answer 2

이 트릭을해야을 방지하기 위해 노드에 저장된 data-initialText 속성에 원본 텍스트를 절약 할 수

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

당신에게 ' d 변수를 다시 원래대로 설정하려면 변수에 저장해야합니다.

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