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!");
});

- cusejuice

---

如果要替换的所有内容都在某个元素内部，那么这将会容易得多。 - Jon

你需要用jQuery完成还是静态文本？ - Paul

http://api.jquery.com/mouseover/#example-0 应该会向您展示。 - Nick Maroulis

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 属性中，以避免使用变量。

- Fabrizio Calderan

---

你比我早43秒发了这个帖子，但有趣的是，当我点击发送时，我的互联网断开了一瞬间，所以我在发送时必须输入验证码。 - Andrew Willis

个人认为，这可以替换它，但当鼠标移出时，它仍然保留新文本！ - Dikeneko

请注意，在HTML节点中，键必须使用kebab-case命名，例如：<div class="btn" data-default-text="foobar">。 - olieidel

Answer 2

这应该可以解决问题

$(function(){
  var prev;    

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

- Andrew Willis

Answer 3

$('.btn').hover(function() {
    // store $(this).text() in a variable     
    $(this).text("I'm replaced!");
},
function() {
    // assign it back here
});

- Ajinkya

Answer 4

像这样为悬停事件添加另一个功能：

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

链接进行演示

- optimusprime619

---

哇，现在我意识到我有多么慢了... 在这里使用 jsfiddle 链接是一个坏主意 :'( - optimusprime619

Answer 5

你需要将它存储在一个变量中，以便能够将其重置回原来的值，尝试使用以下代码：

var text;

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

- Mathew Thompson