简单 jQuery 脚本不起作用

Question

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

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

CodePen Link

Answer 1

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

Uncaught ReferenceError: myFunction is not defined

试试这个片段 -

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

尝试在 css 部分中使用 display:none; 而不是 visibility:hidden;。

简单 jQuery 脚本不起作用

Simple jQuery script isn't work

jquery

codepen