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('defaultText', $this.text());
        $this.text("I'm replaced!");
    },
    function() {
        var $this = $(this); // caching $(this)
        $this.text($this.data('defaultText'));
    }
);

您可以将原始文本保存在存储在节点本身中的 data-defaultText 属性中，以避免变量