jQuery“隐藏”功能不起作用

问题描述：

我无法让jQuery的“隐藏”功能正常工作。我只是使用死链接？我应该使用2.1.1吗？ “警报”功能似乎可行，但隐藏功能不起作用。任何想法我应该做什么？jQuery“隐藏”功能不起作用

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

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

 
.effects{ 
 

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

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

 
\t #content{ 
 
\t \t width: 700px; 
 
\t } 
 

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

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

 
\t \t p{ 
 
\t \t \t width: 700px; 
 
\t \t } 
 

 

 

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

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

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

仔细查看再次在你的代码。 – PeeHaa

您需要将div =“hide”更改为id =“hide”。 – ninnemannk

答

小错字，你需要纠正这一行：

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

这样：

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

EDITED

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

谢谢我改变了div => id但它仍然不起作用。 –

添加了一些代码示例，因为它应该可以正常工作。 – MaxZoom

答

你的问题是你的按钮

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

它应该是ID = “隐藏”

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

谢谢我改变了div => id但它仍然不起作用。 javascript表单，是的。 jQuery格式，没有 –

它目前正在JSFiddle上运行 – Benjamin

jQuery“隐藏”功能不起作用

相关推荐