jquery - 简单的 jQuery 脚本不起作用

Question

我有一个小问题，jQuery不在这里工作，我看不出有什么问题，我正在做。我需要一些帮助。:)

$(document).ready(function(){
  $("#button").click(function(){
     $("#hcon").show();
  });
});

CodePen 链接

Answer 1

您的 JS 代码没有调用函数myFunction，请在浏览器开发工具控制台中检查 -

未捕获的 ReferenceError：未定义 myFunction

试试这个片段 -

$(document).ready(function(){
  myFunction();
});

function myFunction() {
      $("#button").click(function(){
        $("#hcon").show();
        console.log("clicked")
    });
}

body {
background-color: lightblue;
}
#container
{
position: relative;
width: 900px;
height: 500px;
background-color: white;
margin: 0 auto;
margin-top: 50px;
border: 5px solid black;
box-shadow: -20px 30px grey ;
}

#taer {
  
  
}

#button {
display: inline-block;
position: absolute;
 left: 0; 
right: 0; 
margin-left: auto; 
margin-right: auto; 
bottom: 20px;
width: 120px; 
background-color: darkgray;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
 text-align: center;
}

#button:hover{
background-color: cyan;
border-top: 1px solid black;
}

#hcon {
display: inline-block;
position: absolute;
top: 10px;
left: 0; 
right: 0; 
margin-left: auto; 
margin-right: auto; 
height: 300px;
width: 200px;
background-color: black;
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

<div id="taer">
</div>
  <div id="hcon">
  </div>
 <div id="button" onclick="myFunction()">Click!</div>
</div>

另外，请注意，在 css 中，我更改visibility: hidden为display: none;.

Answer 2

尝试通过制作display:none;而不是visibility:hidden;在 css 部分中。