CODEWITHSUNDEEP
jquery
user1688793
user1688793

Reputation:

jquery text replace won't work

i want to replace the text of the opening button (slidetoggle) when the slider is open:

$("#flip").click(function(){
                $('#panel').slideToggle('slow', function() {
                    if ($('#panel').is(':hidden')) {
                        $('#flip').text().replace("close", "open");
                    }
                    else {
                        $('#flip').text().replace("open", "close");
                    }
                }); 
            });

what am i doing wrong?

Upvotes: 2

Views: 339

Answers (4)

niko
niko

Reputation: 9393

Follow 2 important things to speed up process

1) use $(this) whenever you refer to current element

2) Store it in a var when you refer to the same element multiple times

$("#flip").click(function(){
      // store in a var since you are referring multiple times
      var flip = $(this);
      $('#panel').slideToggle('slow', function() {
         // get the inner text of the flip 
         var flipText = flip.text();
         // $(this) refers to #panel
         if ($(this).is(':hidden')) {  
         // 'flipText.replace("close", "open")' gives replaced Text
         //  copy back the replaced string 
             flip.text(flipText.replace("close", "open");
         }
         else {
              flip.text(flipText.replace("open", "close");
         }
      }); 
});

Upvotes: 0

Alex Marinov
Alex Marinov

Reputation: 191

This should do the work for you:

$("#flip").click(function () {
    $('#panel').slideToggle('slow', function () {
        $('#flip').text(function (i, text) {
            if ($('#panel').is(':hidden')) {
                $('#flip').html("close")
            } else {
                $('#flip').html("open")
            }
        })
    }); });

And it would be even better if you avoid using the jQuery function so many times. You can use something like this:

var btnFlip = $("#flip");

And from here on, you can use btnFlip.HTML instead.

Note: As mentioned in the comments, this will replace the text of the button by "close" or "open". So this can be used only if this is the only text of the button.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

After replacing the word you are not setting the text back to the element

$("#flip").click(function () {
    $('#panel').slideToggle('slow', function () {
        $('#flip').text(function (i, text) {
            if ($('#panel').is(':hidden')) {
                return text.replace("open", "close")
            } else {
                return text.replace("close", "open")
            }
        })
    });
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337590

You're replacing the text, but not changing the text property to the new value. Try this:

if ($('#panel').is(':hidden')) {
    $('#flip').text(function(i, val) {
        return val.replace('open', 'close');
    });
}
else {
    $('#flip').text(function(i, val) {
        return val.replace('close', 'open');
    });
}

Upvotes: 4

Related Questions