jQuery的更换悬停元素的文字(jQuery replace text of element on

使用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存储在节点本身这样可避免变量属性

Answer 2:

这应该做的伎俩

$(function(){
  var prev;    

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

Answer 3:

添加其他功能，这样的悬停事件：

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

链接的演示

Answer 4:

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

Answer 5:

你需要将其存储在一个变量，以将其设置回是什么东西，试试：

var text;

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

文章来源: jQuery replace text of element on hover