jQuery thay thế văn bản của phần tử trên di chuột

Question

Với jQuery, tôi đang cố gắng thay thế văn bản, bao gồm cả khoảng, bên trong các liên kết này khi di chuột. Sau đó, khi người dùng di chuột ra, văn bản gốc được hiển thị lại.

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

Kết quả cuối cùng nên

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

tôi toying xung quanh với nhưng không chắc chắn làm thế nào để thay thế nó trở lại. Ý tưởng nào?

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

bạn có thể lưu các văn bản gốc trong một thuộc tính data-initialText lưu trữ trong các nút tự như vậy để tránh các biến

Answer 2

này nên làm các trick

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

Bạn' d cần phải lưu nó trong một biến để đặt nó trở lại với những gì nó đã được, hãy thử:

var text; 

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

Answer 5

thêm chức năng khác với sự kiện di chuột như thế này:

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

Link cho bản demo