jQuery替换悬停时元素的文本 [英] jQuery replace text of element on hover

问题描述

使用jQuery，我试图在悬停的这些链接中替换文本，包括span。

With jQuery, I'm trying to replace the text, including the span, inside these links on hover. Then when the user hover's off, the original text is displayed again.

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

最后的输出应该是

The final output should be

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

我在玩弄，但不知道如何将它取代。任何想法？

I'm toying around with but not sure how to replace it back. Any ideas?

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

推荐答案

$('.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 属性存储在节点本身中，以避免变量

you could save the original text in a data-initialText attribute stored in the node itself so to avoid variables

这篇关于jQuery替换悬停时元素的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！