Question

所以，我有以下jQuery代码，当单击一个按钮时，它会滑动列表以替换另一个列表。按钮的文本然后更改为＆＃34;开发语言＆＃34;这样用户就知道再次点击该按钮返回原始列表。当用户再次单击该按钮返回到原始列表时，如何让按钮更改回原始文本？

$(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/

Answer 2

您可以查看当前文本的内容并根据状态进行更改：

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

单击后将按钮更改回原始名称

2 个答案: