单击jquery切换时更改按钮文本(显示/隐藏/显示)

Question

我正在研究这个小提琴:http: //jsfiddle.net/cED6c/7/ 我想点击按钮文本更改,我尝试使用以下代码:

<input type="button" class="reveal" onClick="this.value=this.value=='Show Answer'?'Hide Answer':'Show Answer'" value="Show Answer">

但是,它不起作用.我该如何实现呢？任何帮助都会很棒.

Answer 1

您需要添加以下代码:

if ($.trim($(this).text()) === 'Show Answer') {
    $(this).text('Hide Answer');
} else {
    $(this).text('Show Answer');        
}

你可以在工作中看到它:

http://jsfiddle.net/cED6c/13/

我在显示答案后的html中添加了trim函数原因.

Answer 2

使用jQuery很容易更改文本.

这里的工作示例.http://jsfiddle.net/vp7Y7/

$('.reveal').click(function() {
    if ($(this).text() === 'Show Answer') {
         $(this).text('This is NEW TEXT!!! It Worked!');
    }
    else {
        $(this).text('Show Answer');
    }
});