jQuery reemplaza el texto del elemento al pasar el mouse

Con jQuery, estoy tratando de reemplazar el texto, incluido el lapso, dentro de estos enlaces al pasar el mouse. Luego, cuando el usuario se desplaza, el texto original se muestra nuevamente.

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

La salida final debe ser

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

Estoy jugando pero no estoy seguro de cómo volver a colocarlo. ¿Algunas ideas?

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

preguntado el 22 de mayo de 12 a las 12:05

Esto sería mucho más fácil si todos los el contenido a ser reemplazado estaba dentro de algún elemento. -

¿Necesita que se haga con jQuery o es texto estático? -

5 Respuestas

$('.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'));
    }
);

puede guardar el texto original en un data-defaultText atributo almacenado en el propio nodo para evitar variables

respondido 01 mar '19, 22:03

Publicaste esto 43 segundos antes que yo, pero lo divertido es que mi Internet se cortó por una fracción de segundo cuando hice clic en enviar y tuve que ingresar un captcha cuando lo envié. andres willis

Personalmente, esto lo reemplaza, pero luego, cuando el mouse se apaga, ¡todavía conserva el nuevo texto! - Dikeneko

Tenga en cuenta que la clave en el nodo html debe estar en mayúsculas, en este ejemplo: <div class="btn" data-default-text="foobar"> - olieidel

Esto debería funcionar

$(function(){
  var prev;    

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

contestado el 22 de mayo de 12 a las 12:05

agregue otra función al evento de desplazamiento como este:

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

Enlace para demostración

contestado el 22 de mayo de 12 a las 12:05

wow, ahora me doy cuenta de lo lento que soy ... y un enlace jsfiddle fue una mala idea aquí :'( - optimusprime619

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

Respondido 14 Jul 12, 16:07

Necesitaría almacenarlo en una variable para restablecerlo a lo que era, intente:

var text;

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

contestado el 22 de mayo de 12 a las 12:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.