2017-08-26 5 views
0

Ich habe kleines Problem, jQuery funktioniert hier nicht und ich kann nicht sehen, was los ist, mache ich. Ich würde einige Hilfe schätzen. :)Einfache jQuery-Skript funktioniert nicht

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

CodePen Link

+0

Bitte beschreiben Sie sowohl das aktuelle als auch das erwartete Verhalten. –

+0

Ersetze 'visibility: hidden;' mit 'display: none;' in CSS – Xaqron

+0

Problem gelöst! Entschuldigung dafür, das erwartete Verhalten nicht erwähnt zu haben, sollte es eine Black Box mit der ID von #hcon enthalten haben, wenn auf die Schaltfläche geklickt wurde. :) –

Antwort

2

Ihr JS-Code keine Funktion haben myFunction genannt, überprüfen Sie diese im Browser Entwickler-Tools-Konsole -

Uncaught ReferenceError: myFunction is not defined

dieses Snippet Versuchen -

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

Beachten Sie auch, dass ich in der CSS visibility: hidden zu display: none; geändert habe.

+0

Arbeitet mit Como Ihrer Beratung und Beratung von Srinibas Biswal !! Tnx! –

0

Versuchen Sie, indem Sie display:none; anstelle von visibility:hidden; im css Teil machen.

+0

Arbeitet mit Como Ihrer Ratschläge und Ratschläge von Manish Giri! Tnx! –