Question

我正在尝试使用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>

Answer 1

$(document).ready(function(){
var t = "on"; 
$("button").click(function(){

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

});

这样的事情。基本上$("p").hide部分总是触发。

或者更简单，使用toggle功能

Answer 2

那是因为您需要将hide逻辑放在else：

中

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

在您的代码中，当您“再次点击”时，虽然t为off且$("p")在开头显示，但会立即显示{{1}再次。

Answer 3

$(document).ready(function(){
var t; 
$("button").click(function(){

  if (t === "off")
  {  
      $(this).text("hide text");
       t = "";  
  } else {      
   $(this).text("show text");
   t = "off";  
   }
$("p").toggle();
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Click Me!</button>
<p>Paragraph text</p>

Answer 4

有很多答案已经提供给你，所以我只想指出我认为可以做得更好的事情。

您需要将以下代码的一部分放在else语句中，否则无论t的值如何，都会执行此代码块。我建议您了解if-else条件语句的更多信息。
```
 $("p").hide();
 $(this).text("show text");
 t = "off";  
```
$("button").click(function(){您应该使用按钮的id，即$("#nameOfButtonID").click(function(){。了解html中的id或class属性。 id是一种识别处理点击事件的按钮的唯一方式。
t可被视为boolean。

Answer 5

在你的按钮点击功能中，你必须在if循环退出之前返回，你需要设置一些其他值或未定义为t。

执行顺序：首先点击：

t值是＆＃34;未定义＆＃34;
如果循环不执行
隐藏＆＃34; p＆＃34;
将按钮值设置为＆＃39;显示文字＆＃39;并且t为＆＃34; off＆＃34;

第二次点击：

t值为＆＃34; off＆＃34;
如果循环将执行
它会显示＆＃39; p＆＃39;
将按钮值更改为＆＃39;隐藏文字＆＃39;

----在这里你应该改变t的值并返回----
因为没有回报＆＃39; p＆＃39;将隐藏

按钮文字将显示文字＆＃39;试。

$("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";
});

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

5 个答案: