Question

我想制作一个带有谜语的页面，在每个谜语后面都有一个答案按钮和onclick显示答案，但也会将按钮的值更改为隐藏，这样当您再次按下该按钮时，您将隐藏答案。我做了一些东西，但我是Javascript的初学者，所以我无法弄清楚我做错了什么：HERE

HTML：

<input type="button" value="Answer" onclick="return change(this);" />
<p id="click">This is the riddle answer.</p>

的CSS：

#click{
display:none;}

JS：

   $(document).ready(function(){
    $(window).change(function(){
        if (el.value == "Answer" ){
            $("p#click").removeClass("click");
            el.value = "Hide";
        } else if ( el.value = "Hide";) {
            $("p#click").addClass("click");
        }
    });
});

我希望这样：Demo，但只需一个按钮即可更改其值，并从回答变为隐藏，从隐藏变为回答。

Answer 1

以下是 updated Demo

的jQuery

$(document).ready(function(){
  $("#show").click(function(){
      if ($(this).text() == "Show")
       $(this).text("Hide")
    else
       $(this).text("Show");
      $("span").slideToggle();

  });
});

Answer 2

这是您的工作代码：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#show").click(function(){
      $("#click").slideToggle();
      if($("#show").val() == 'Show')    {
        $("#show").val('Hide');
      }else {
        $("#show").val('Show');
      }
  });
});
</script>
<style>
#click{
display:none;}
</style>
</head>
<body>
<input type="button" value="Show" id="show" />
<p id="click">This is the riddle answer.</p>
</body>
</html>

更改按钮值Onclick

2 个答案: