Best IT Recipes

Jquery text toggle button

When I click the ".pushme" button, it turns my text into "Don't push me." I want to rotate the text again to β€œpush me” when the button is pressed again. How can i do this?

<html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <button class='pushme'>PUSH ME</button> <script> $(".pushme").click(function () { $(this).text("DON'T PUSH ME"); }); </script> </body> </html>

http://jsfiddle.net/DQK4v/

Thank.

+42
jquery button toggle
Nov 30 '12 at 20:40
source share
9 answers

You can use the text method:

 $(function(){ $(".pushme").click(function () { $(this).text(function(i, text){ return text === "PUSH ME" ? "DON'T PUSH ME" : "PUSH ME"; }) }); })

http://jsfiddle.net/CBajb/

+139
Nov 30
source share

You can also use .toggle() as follows:

 $(".pushme").toggle(function() { $(this).text("DON'T PUSH ME"); }, function() { $(this).text("PUSH ME"); });

Additional information at http://api.jquery.com/toggle-event/ .

This method also allows you to easily change the text or add no more than two different states.

+15
Nov 30
source share

Use a special identifier, if possible, if you want to apply an action only to this button.

HTML

 <button class="pushDontpush">PUSH ME</button>

JQuery

 $("#pushDontpush").click(function() { if ($(this).text() == "PUSH ME") { $(this).text("DON'T PUSH ME"); } else { $(this).text("PUSH ME"); }; });

Work Code Pen: Toggle button text

+8
Nov 30 '12 at 20:44
source share

With so many great answers, I thought I would drop another mix. This, unlike others, will allow you to easily navigate through any number of messages:

 var index = 0, messg = [ "PUSH ME", "DON'T PUSH ME", "I'M SO CONFUSED!" ]; $(".pushme").on("click", function() { $(this).text(function(index, text){ index = $.inArray(text, messg); return messg[++index % messg.length]; }); }​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​);​

Demo: http://jsfiddle.net/DQK4v/2/

+5
Nov 30 '12 at
source share

Use the if / else .. operator or the triple if you understand it

 $(".pushme").click(function () { var $el = $(this); $el.text($el.text() == "DON'T PUSH ME" ? "PUSH ME": "DON'T PUSH ME"); });

http://jsfiddle.net/dFZyv/

+3
Nov 30
source share

I prefer the following method, it can be used with any button.

 <button class='pushme' data-default-text="PUSH ME" data-new-text="DON'T PUSH ME">PUSH ME</button> $(".pushme").click(function () { var $element = $(this); $element.text(function(i, text) { return text == $element.data('default-text') ? $element.data('new-text') : $element.data('default-text'); }); });

demonstration

+2
Nov 30
source share

If you customize the button text using the 'value' attribute, you need to set

  • $ (this) .val ()

instead:

  • $ (this) .text ()

Also in my situation, it was better to add jQuery directly to the onclick event of the button:

 onclick="$(this).val(function (i, text) { return text == 'PUSH ME' ? 'DON'T PUSH ME' : 'PUSH ME'; });"
+2
Oct 23 '13 at 4:10
source share
 $(".pushme").click(function () { var button = $(this); button.text(button.text() == "PUSH ME" ? "DON'T PUSH ME" : "PUSH ME") });

This ternary operator has an implicit return. If the expression is before ? equal to true , it returns "DON'T PUSH ME" , else returns "PUSH ME"

This if-else statement:

 if (condition) { return A } else { return B }

has an equivalent ternary expression:

 condition ? A : B
+2
May 13 '16 at 9:08 a.m.
source share

You can also use a math function to do this.

 var i = 0; $('#button').on('click', function() { if (i++ % 2 == 0) { $(this).val("Push me!"); } else { $(this).val("Don't push me!"); } });

Demo

+1
Apr 23 '16 at 17:21
source share


More articles:


All Articles