单击 jquery 更改 HTML - 然后返回原始 HTML

Question

我想创建我的第一个基于 Web 的 jQuery 应用程序。我已经达到了我想要的结果的一半。单击后更新我的按钮以更改为 'Hide Answer'，但是我希望按钮在用户单击激活切换时更改回 'Show Answer' 的原始文本...

$(".answer-button").click(function(){
   $(this).html("Hide Answer").prev().toggle();
});

此处包含 jsfiddle；

https://jsfiddle.net/rossmclenny/51jg4f79/1/

Answer 1

只需测试文本值即可：

    $(".answer-button").click(function () {
      if ($(this).text().includes("Show")) {
        $(this).html("Hide Answer").prev().toggle();
      } else {
        $(this).html("Show Answer").prev().toggle();
      }
    });

Answer 2

你可以测试可见的属性

$(".answer-button").click(function(){
    $(this).prev().toggle();
    if($(this).parent().find('#answer').is(':visible')){
        $(this).html("Hide Answer");
    }else{
       $(this).html("Show Answer");
    }
});