javascript - 单击后将按钮更改回原来的名称

Question

这个问题已经有答案了:

Button text toggle in jquery (10 个回答)

已关闭 8 年前。

因此，我有以下 jQuery 代码，当单击按钮时，该代码会向上滑动一个列表以替换另一个列表。然后，按钮的文本更改为“开发语言”，以便用户知道再次单击该按钮以返回原始列表。当用户再次单击按钮返回到原始列表时，如何让按钮更改回原始文本？

$(document).ready(function() {

    $(".projects").on("click", function(){

        $(".devList").slideToggle();
        $(".devButton").slideToggle();
        $(".projects").text("Development Languages");
    });
});

Answer 1

有很多方法可以做到这一点，最简单的是使用 .text() 方法来检索按钮的当前文本并对其进行测试:

var currentText = $(this).text();
if (currentText === "Development Languages")
    $(this).text("Whatever the old label was");
else
    $(this).text("Development Languages");

但是，您可能不希望在 JavaScript 中对不同的标签进行硬编码。因此，您可以将其放入标记中，如下所示:

<button class="projects" data-alternate-label="Development Languages">Click me</button>

...然后使用更通用的 JavaScript 来检查 data- 属性，以查看单击时的替代标签是什么，存储先前的文本以供下次单击后使用:

    var $this = $(this),
        alternateLabel = $this.data("alternate-label");
    $this.data("alternate-label", $this.text());
    $this.text(alternateLabel);

这样，您就可以在同一页面上拥有多个带有关联列表的按钮，并且仍然只需要一键处理程序来管理它们，如下所示:http://jsfiddle.net/c5584bgr/2/