Jquery change .text(something) then bring back

Question

If i have the following code:

html

<div class ="lg"> <img src="/images/images.gif"> </div>

javascript

$('.lg').text("Correct");

The jquery will remove image and replace it with "Correct". This is only intended to be a delay before I need the image to reappear. so it will flash correct then bring back the original image.

I don't really understand your question. Do you need the image to disappear for a second show the correct message and then the image to reappear? — user1236048, Mar 26 '12 at 15:17
You can try the approach described here: http://stackoverflow.com/a/5720548/114029 — Leniel Maccaferri, Mar 26 '12 at 15:21

Joel Lundberg · Answer 1 · 2012-03-26T16:26:40.307

A cleaner way of accomplishing this is in my opinion to use different classes for the image and the text, and hide/show them respectively:

CSS:

.text {
    display: none;
}

HTML:

<div class="lg">
    <div class="image">IMAGE</div>
    <div class="text">Correct</div>
</div>

JavaScript (on a click event or something):

$(".lg .image").hide();
$(".lg .text").show();

setTimeout(function() {
    $(".lg .image").show();
    $(".lg .text").hide();
}, 1000);

score 1 · Answer 2 · answered Mar 26 '12 at 15:17

You'll need to store the old contents, then:

var oldhtml = $('.lg').html(); 
// WARNING: will give unexpected results if .lg matches more than one element
$('.lg').text("Correct");
setTimeout(function(){
    $('.lg').html(oldhtml);
}, 1000); // milliseconds

If there's more than one item with class lg, you'll need a loop instead:

$('.lg').each(function() {
    var oldhtml = $(this).html(); 
    $(this).text("Correct");
    setTimeout(function(){
        $(this).html(oldhtml);
    }, 1000); // milliseconds
});

score 1 · Answer 3 · answered Mar 26 '12 at 15:21

You can try something like this.

<div class ="lg"> 
      <img src="/images/images.gif"> 
      <span style="display:none;">correct</span> 
</div>

JS

To show the Correct text

$('.lg').find('img').fadeOut();
$('.lg').find("span").fadeIn();

To show the image

$('.lg').find('img').fadeIn();
$('.lg').find("span").fadeOut();

Finally your code can be like this.

$('.lg').find('img').fadeOut();
$('.lg').find("span").fadeIn();
setTimeout(function(){
     $('.lg').find('img').fadeIn();
     $('.lg').find("span").fadeOut();
}, 2000);//delay of 2 secs

score 1 · Answer 4 · answered Mar 26 '12 at 15:24

Instead of flipping the html of the div, I would suggest having both the "Correct" label and the image live in the div and then toggle the two of them on and off:

<div class="lg">
    <span id="correctSpan">Correct!</span>
    <img id="image" src="/images/images.gif">
</div>


$(document).ready(function () {
    // hide the correctSpan from the start
    $('#correctSpan').toggle();
});

// in the event handler that toggles the two...
$('#correctSpan, #image').toggle();

score 0 · Answer 5 · answered Jan 02 '23 at 13:56

Here is the code! Use this code according to your situation! I've created a click event here but if you want to show the text directly the just paste this code in a function and just call your function!

 $('.click_button').on('click', function() {

    $(".lg img").css('display', 'none');
    $(".lg .message").text("Correct!");

    
    if ($('.lg .message').text() == 'Correct!') {
      function bringback() {
        $(".lg img").css('display', 'block');
        $(".lg .message").text('');
      }
        setTimeout(bringback, 1000);
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="lg"> 
        <img src="https://play-lh.googleusercontent.com/1-hPxafOxdYpYZEOKzNIkSP43HXCNftVJVttoo4ucl7rsMASXW3Xr6GlXURCubE1tA=w3840-h2160-rw" style="width: 150px;"> 
        <div class="message"></div>
</div>

<button type="button" class="click_button">Click</button>

score 0 · Answer 6 · answered Mar 26 '12 at 15:18

You need to save the image (the original text) in a string, change it, and then change it back.

var orig = $('.lg').html(); // This should be .html, not .text
                            // so that it saves the <img/> tag
$('.lg').text('Correct');
// After a delay
setTimeout(function(){
    $('.lg').html(orig);  // Use .html here, so that the <img/> tag will work
}, 1000);

There is a better way to do this, though. Have a span with "Correct" in it, and then just hide/show the image and text.

<div class="lg">
    <img src="/images/images.gif" />
    <span style="display:none;">Correct</span>
</div>

And then in JS:

$('.lg').find('img,span').toggle(); // This will hide the image and show the text
                                   // run it again to change it back

i do not think .text() will do what you think it does... i think it should be .html() instead? — jbabey, Mar 26 '12 at 15:20
@jbabey: You're right, I need `.html` so that the `` tag will work. Fixed. — gen_Eric, Mar 26 '12 at 15:22

score 0 · Answer 7 · answered Mar 26 '12 at 15:25

0

How about something like this:

CSS:

.hidden { display:none; }

HTML:

<div class="lg">
    <img src="/images/images.gif">
    <span class="hidden">Correct</span>
</div>

JS:

$(".lg").find("img, span").fadeToggle();

answered Mar 26 '12 at 15:25

Ryan

1,387
14
23

score -1 · Answer 8 · answered Mar 26 '12 at 15:22

-1

So you have to put another change with timeout. Because change actually replace object in dom.

answered Mar 26 '12 at 15:22

kappa

1,559
8
19

I'm sorry, but it's not at all clear to me what you're trying to say here. – Blazemonger Mar 26 '12 at 19:32
i meant that in order to do what you want, you have to backup current tag content in a var before doing your change(), then setting a timeout you can restore previous content with another change(). Basically what @mblase75 said in 2nd code snippet. – kappa Mar 26 '12 at 22:54

Jquery change .text(something) then bring back

8 Answers8