在jquery中切换按钮文本答案

【问题标题】：Toggling button text in jquery在jquery中切换按钮文本
【发布时间】：2012-10-30 21:50:23
【问题描述】：

我创建了一个 HTML 按钮，我想使用 Javascript/JQuery 在两个文本之间切换按钮中显示的文本。我该怎么做？

目前，我有：

<button onclick="showAll();" class="collapse-classes">
    <span class="button-text">Show</span>
</button>

该按钮从显示“显示”开始，然后在单击时切换到“隐藏”，然后在再次单击时切换到“显示”并继续。我尝试更改标签的值，但它不会更改显示的文本。任何人都可以帮助编写脚本吗？谢谢

【问题讨论】：

你实际尝试过什么？
两个答案在单击两次后都会切换文本。我希望文本在单击后立即切换，有什么办法吗？
你自己做过工作吗？

标签： javascript jquery html button

【解决方案1】：

不要使用onclick。只需绑定一个事件处理程序。

您可以使用以下方法：

$('.collapse-classes').click(function() {
    var $this = $(this);

    $this.toggleClass('show');

    if ($this.hasClass('show')) {
        $this.text('Show');
    } else {
        $this.text('Hide');
    }
});

【讨论】：

【解决方案2】：

跟随你的 DOM 树

$('.collapse-classes').click(function() {

    var span = $(this).find('span');

    if(span.text() == "Show"){
        span.text("Hide");
    } else {
        span.text("Show");
    }

});

【讨论】：