单击[重复]后将按钮更改回原始名称答案

【问题标题】：Change button back to original name after clicking [duplicate]单击[重复]后将按钮更改回原始名称
【发布时间】：2015-03-09 02:47:58
【问题描述】：

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

$(document).ready(function() {

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

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

【问题讨论】：

嗯...再次使用.text() 方法？或者您是在问如何知道当前点击是更改为新值还是旧值（假设您使用切换方法滑动其他项目）？
检查当前值并进行相应更改。这里没有魔法。
保持简单，将$(".projects").text("Development Languages"); 替换为$(".projects").text()=="Development Languages" ? $(".projects").text("Something Else") : $(".projects").text("Development Languages");

标签： javascript jquery button

【解决方案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/

【讨论】：

这太完美了，非常感谢！我只是在学习 jQuery，不知道如何使用条件！现在我查看它并将其应用到我的代码中，这非常有意义！非常感谢！

【解决方案2】：

您可以检查当前文本是什么并根据状态进行更改：

if ($(".projects").text() === "Development Languages") {
  $(".projects").text("New Text");
} else {
  $(".projects").text("Development Languages");
}

【讨论】：