Javascript 简单JQuery显示/隐藏文本按钮

我正在尝试使用JQuery进行练习，所以我制作了一个简单的程序…或者尝试。有一个按钮，单击时隐藏页面上唯一的元素。那很好。但是，当我再次单击它时，它不会像预期的那样，返回段落并更改按钮文本。我有没有办法不用两个按钮就能让它工作？下面是脚本现在的样子：

 <script>  
  $(document).ready(function(){

    var t;
    $("button").click(function(){

      if (t === "off") {
         $("p").show();
         $(this).text("hide text");
      }

      $("p").hide();
      $(this).text("show text");
      t = "off";  
    });
 });
</script>

差不多吧。基本上，$p.hide部分总是触发

---

或者更简单，使用切换功能，这是因为您需要将隐藏逻辑放在else中：

在您的代码中，当您再次单击它时，尽管t处于关闭状态且$p在开始时显示，但它会立即再次隐藏。

$document.readyfunction{ 变量t； $button.clickfunction{ 如果t==关 { $this.text隐藏文本； t=； }否则{ $this.textshow text； t=关； } $p.toggle； }; }; 点击我！

---

段落文本

已经向您提供了许多答案，所以我只想指出一些我认为可以做得更好的事情

您需要将下面的代码部分放在else语句中，否则不管t的值是多少，这段代码都将执行。我建议您进一步了解if-else条件语句

 $("p").hide();
 $(this).text("show text");
 t = "off";  

$button.clickfunction{您应该使用按钮的id，即$nameOfButtonID.clickfunction{。了解html中的id或class属性。id是标识处理单击事件的按钮的唯一方法。 t可以被视为布尔值。

---

在按钮单击函数中，必须在if循环退出之前返回，并且需要将一些其他值或未定义值设置为t

执行顺序： 第一次点击：

t值未定义 如果循环无法执行 隐藏p 将按钮值设置为“显示文本”，将t设置为关闭 第二次点击：

t值关闭 如果循环将执行 它将显示“p” 将按钮值更改为“隐藏文本”

--在这里，您应该更改t的值并返回--

由于没有返回，“p”将隐藏

按钮文本将再次显示为“显示文本”

$("button").click(function() {
   if (t === "off") {
     $("p").show();
     $(this).text("hide text");
     //add the below code
     t = undefined;
     return;
    }
   $("p").hide();
   $(this).text("show text");
   t = "off";
});

---

谢谢……这个方法奏效了。但奇怪的是，我可以发誓我之前就试过类似的方法。@DennisMarkham初学者可能的原因是括号排列不正确。Javascript经常会遇到这种情况

 $("p").hide();
 $(this).text("show text");
 t = "off";  

$("button").click(function() {
   if (t === "off") {
     $("p").show();
     $(this).text("hide text");
     //add the below code
     t = undefined;
     return;
    }
   $("p").hide();
   $(this).text("show text");
   t = "off";
});