在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">

然而，它并没有起作用。我应该如何实现这个功能呢？任何帮助都将是极好的。

- Skotlive

---

你的问题中为什么展示了一个 input，但是在你的链接演示中使用了 button 元素？ - David Thomas

Answer 1

你需要添加这段代码：

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

您可以在实际工作中看到它的效果：

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

我添加了 trim 函数，因为在 HTML 中，您得到了“Show Answer”后面的空格。

- justtal

---

我应该改变这个吗 $("a[href='" + window.location.hash + "']").parent(".answerbutton").click(); 在WordPress中无法工作，但在jsfiddle中可以正常工作。 - Skotlive

在附加的jsfiddle中，您没有任何a标签。它应该做什么？ - justtal

好的，您希望通过 href 和 location 打开问题？ - justtal

它应该是 window.location.href（适用于所有 URL）或 window.location.href.hash（仅适用于哈希） - justtal

使用：$(this).parent().next('.toggle_container').slideToggle("fast"); - justtal

因为在您的网站中，<p></p> 包裹了 <button></button>。 - justtal

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

- CRABOLO

---

谢谢，它确实起作用了，但是当我再次点击它时，它不会恢复到“显示答案”文本。 - Skotlive

谢谢，但我仍然无法理解 :( 对于我很幼稚，抱歉。请查看这个fiddle，只有第三个按钮可以使用，前两个按钮不能使用。http://jsfiddle.net/cED6c/10/ - Skotlive

Answer 3

像这样简单的东西

 $(document).ready(function () {
    $('a.edit').click(function () {
        var txt = $(this).text();
        txt = (txt !='cancel') ? 'cancel' : 'edit';
        $(this).text(txt);
        $('.editForm').toggle(300);
     });
});

- mercury