Кнопка переключения текста в jquery

Когда я нажимаю кнопку ".pushme", он превращает свой текст в "Не толкать меня". Я хочу снова повернуть текст, чтобы "нажать меня", когда кнопка снова нажата. Как я могу это сделать?

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

Спасибо.

Ответы

Ответ 1

Вы можете использовать метод text:

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

http://jsfiddle.net/CBajb/

Ответ 2

Вы также можете использовать .toggle() следующим образом:

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

Дополнительная информация на http://api.jquery.com/toggle-event/.

Этот способ также позволяет легко изменить текст или добавить не более двух разных состояний.

Ответ 3

Используйте специальный идентификатор, если это возможно, если вы хотите применить действие только к этой кнопке.

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"); 
    }; 
});

Рабочий кодPen: Переключить текст в кнопке

Ответ 4

С таким большим количеством отличных ответов я подумал, что я брошу еще один микс. Этот, в отличие от других, позволит вам легко перемещаться по любому количеству сообщений:

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];
    });
});

Демо: http://jsfiddle.net/DQK4v/2/

Ответ 5

Используйте оператор if/else.. или тройной, если вы его понимаете

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

http://jsfiddle.net/dFZyv/

Ответ 6

Я предпочитаю следующий способ, его можно использовать любой кнопкой.

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

демонстрация

Ответ 7

Если вы настраиваете текст кнопки с помощью атрибута 'value', вам нужно установить

$(это).val()

вместо:

$(это).text()

Также в моей ситуации лучше было добавить JQuery прямо к событию onclick кнопки:

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

Ответ 8

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

Этот тернарный оператор имеет неявный возврат. Если выражение перед ? равно true, оно возвращает "DON'T PUSH ME", else возвращает "PUSH ME"

Этот оператор if-else:

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

имеет эквивалентное тернарное выражение:

condition ? A : B

Ответ 9

Вы также можете использовать математическую функцию для этого

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

DEMO