jQuery "hide" 功能无效

Question

我无法使 jQuery 的 "hide" 函数正常工作。我只是在使用死link吗？我应该使用 2.1.1 吗？ "alert" 函数似乎有效，但隐藏函数无效。我还有什么想法吗？

*{
 margin: 0px;
 padding: 0px;
}

#container{
 width: 900px;
 margin: 0px auto;
 font-family: helvetica;
}

.effects{

}
 .effects button, #content{
  display: inline-block;
  /*vertical-align: top;*/
 }

 button{
  border: 2px solid grey;
  border-radius: 5px;
  padding: 5px;
  margin: 50px 0 0 0;
  position: relative;
  vertical-align: center;
  font-size: 18px;
  font-weight: bold;
 }

 #content{
  width: 700px;
 }

  #content h2, p{
   display: block;
   vertical-align: top;
   width: 700px;
  }

  h2{
   text-align: center;
   width: 700px;
  }

  p{
   width: 700px;
  }



 #border{
  border-bottom: 4px solid black;
  padding: 10px 0;
  /*margin: 10px 0;*/
 }

<!DOCTYPE>
<html>
<head>
 <title>Help me with jQuery</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){

   $('h1').click(function(){
    alert('hello');
   })
   $('#hide').click(function(){
    $('p').hide();
   })
        })
 </script>
</head>
  
<body>
 <h1>YOOO</h1>
 <div id="container">
  <div class="effects">
   <button div="hide">hide</button>
   <div div="content">
    <h2>hide</h2>
    <p>Hide the matched elements.</p>
   </div>
   <div id="border"></div>
  </div>
     </div>    
</body>
</html>

Answer 1

小错别字，您需要更正此行：

<button div="hide">hide</button>

对此：

<button id="hide">hide</button>

已编辑

 $(document).ready(function() {

   $('h1').click(function() {
     alert('hello');
   })
   $('#hide').click(function() {
     $('p').hide();
   })
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>YOOO</h1>
<div id="container">
  <div class="effects">
    <button id="hide">hide</button>
    <div div="content">
      <h2>hide</h2>
      <p>Hide the matched elements.</p>
    </div>
    <div id="border"></div>
  </div>
</div>

Answer 2

你的问题出在你的按钮上

<button div="hide">hide</button>

应该是id="hide"

<h1>YOOO</h1>
<div id="container">
    <div class="effects">
        <button id="hide">hide</button>
        <div id="content">
            <h2>hide</h2>
            <p>Hide the matched elements.</p>
        </div>
        <div id="border"></div>
    </div>
 </div>

查看这个 JsFiddle：http://jsfiddle.net/52eu3m4x/

jQuery "hide" 功能无效

jQuery "hide" function is not working

jquery

hide