Question

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

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

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

ready

从jQuery 3.0开始，建议只使用上述语法而不是.ready()，因为其他语法仍然可以使用但不推荐使用。这是因为选择与$(function(){ $("#hide").click(function(){ $(".para").hide(); }); $("#show").click(function(){ $(".para").show(); }); }); // <------ This brace was wrongly coded in your code!方法的行为没有关系，这种方法效率低下，并且可能导致对方法行为的错误假设。

＆＃13;

<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>

＆＃13;

DELETE FROM [dbo].[Artist] WHERE ArtistId>280

＆＃13;

希望这有帮助！

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 vs on.click。

Answer 3

您的代码中缺少{}。请尝试以下代码

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

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

});

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

3 个答案: