显示和隐藏方法不适用于按钮

Question

我创建了两个按钮，目的是显示或隐藏段落。但它不会起作用，我现在很困惑。

HTML-代码：

<!DOCTYPE html>
   <html lang="sv-se">
    <head>
      <meta charset="UTF-8">
      <title>My Web Page</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="show.js"></script>
</head>
<html>
  <body>
  <p class="para">Click on button to show or hide text</p>

    <button id="hide">Hide</button>
    <button id="show">Show</button>
 </body>

这是我的 Javascript-代码：

$(document).ready(function()
  $("#hide").click(function(){
    $(".para").hide();
});
$("#show").click(function(){
    $(".para").show();
    });
 )};

Answer 1

看你的括号，它们编码错误！您应该使用以下语法：

$(function() { ... });

As of jQuery 3.0, only the above syntax is recommended instead of ready as the other syntaxes still work but are deprecated. This is because the selection has no bearing on the behavior of the .ready() method, which is inefficient and can lead to incorrect assumptions about the method's behavior.

$(function(){

  $("#hide").click(function(){
    $(".para").hide();
  });
  
  $("#show").click(function(){
    $(".para").show();
  });

  
}); // <------ This brace was wrongly coded in your code!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="para">Click on button to show or hide text</p>

    <button id="hide">Hide</button>
    <button id="show">Show</button>

希望对您有所帮助！

Answer 2

您的脚本中缺少大括号，试试这个..

$(document).on('click', '#hide', function(){
      $(".para").hide();
});
$(document).on('click', '#show', function(){
      $(".para").show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
   <html lang="sv-se">
    <head>
      <meta charset="UTF-8">
      <title>My Web Page</title>
</head>
<html>
  <body>
  <p class="para">Click on button to show or hide text</p>
    <button id="hide">Hide</button>
    <button id="show">Show</button>
 </body>

另请参阅 THIS 以更好地理解 jQuery 中的 Click 与 on.click。

Answer 3

您的代码中缺少 {}。试试下面的代码

$(document).ready(function(){
   $("#hide").click(function(){
   $(".para").hide();
  });

$("#show").click(function(){
$(".para").show();
   });

});

显示和隐藏方法不适用于按钮

Show and Hide-method won't work on buttons

javascript

jquery

button

show

hide