jQuery заменяет текст элемента при наведении

С помощью 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!");
});
8
hover jquery replace

5 ответов

$('.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 атрибут, хранящийся в самом узле, чтобы избежать переменных

22

это должно сделать трюк

$(function(){
  var prev;    

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

добавьте еще одну функцию к событию наведения, например:

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

ссылке демо

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

вам нужно будет сохранить его в переменной, чтобы вернуть его к тому, чем он был, попробуйте:

var text;

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