jQuery close button funktioniert nicht

Question

Ich habe zahlreiche Threads auf dieser Seite durchlaufen und keiner der Codes, die ich gefunden habe, funktioniert für mich. Ich habe 3 Popups, die ich gerne schließen würde (siehe unten für ein Beispiel). Mir sind die Ideen ausgegangen, warum keiner der jQuery-Codes funktioniert, die ich gefunden habe.

Eigentlich auch eine Randnotiz warum funktioniert ein Skript im HTML aber nicht in meiner .js Datei (siehe auch Beispiel unten)?

Ich wäre sehr dankbar, wenn Sie mir in dieser Angelegenheit helfen könnten, vielen Dank für Ihre Zeit.

$("#close").on('click', function() { 
 
    $("#id1").fadeOut(); 
 
});

.abt-right { 
 
    float: right; 
 
    display: inline-block; 
 
} 
 

 
#id1, #id2, #id3 { 
 
    display:none; 
 
} 
 

 
.abt-btn1, .abt-btn2, .abt-btn3 { 
 
    position: relative; 
 
    right: 10%; 
 
    top: 100px; 
 
    width: 500px; 
 
    height: 90px; 
 
    color: white; 
 
    margin-bottom: 30px; 
 
} 
 

 
.abt-btn1 { 
 
    background-color: black; 
 
    color: white; 
 
} 
 

 
.abt-btn2 { 
 
    background-color: grey; 
 
    color: white; 
 
} 
 

 
.abt-btn3 { 
 
    background-color: black; 
 
    color: white; 
 
} 
 

 
#abt-content1, #abt-content2, #abt-content3 { 
 
    position: absolute; 
 
    padding-right: 10px; 
 
    padding-top: 20px; 
 
    right: 100px; 
 
    bottom: 50px; 
 
    width:100%; 
 
    height: 100px; 
 
    z-index: 999; 
 
} 
 

 
#abt-content1 { 
 
    color: black; 
 
    background-color: red; 
 
} 
 

 
#abt-content2 { 
 
    color: black; 
 
    background-color: blue; 
 
} 
 

 
#abt-content3 { 
 
    color: black; 
 
    background-color: green; 
 
} 
 

 
#close { 
 
    position: absolute; 
 
    right:0; 
 
    top:0; 
 
    padding:2px 5px; 
 
    background:#ccc; 
 
}

<div class="container-fluid wow fadeInLeft" id="about-sec"> 
 
      <div class="back2"> 
 
      
 
<script type="text/javascript"> 
 
function show(elementId) { 
 
document.getElementById("id1").style.display="none"; 
 
document.getElementById("id2").style.display="none"; 
 
document.getElementById("id3").style.display="none"; 
 
document.getElementById(elementId).style.display="block"; 
 
} 
 

 
</script> 
 
       <div class="abt-right"> 
 
        <div class="abt-btn1" onclick="show('id1');">Job Experience</div> 
 
        <div class="abt-btn2" onclick="show('id2');">Education</div> 
 
        <div class="abt-btn3" onclick="show('id3');">Timeline</div> 
 
        
 
        <div id="id1">      
 
         <div class="abt-content" id="abt-content1"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. 
 
<span id="close">×</span> 
 
</div>      
 
        </div> 
 
        <div id="id2">      
 
<div class="abt-content" id="abt-content2"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. 
 
<span id="close">×</span> 
 
</div>      
 
        </div> 
 
        <div id="id3"> 
 
        <div class="abt-content" id="abt-content3"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. 
 
<span id="close">×</span> 
 
</div>      
 
        </div>

Answer 1

ist hier ein Plunker, achten Sie darauf, Schließen Sie Ihren Event-Handler in eine $(doument).ready(function){}); ein. Achten Sie auch darauf, dass die IDs eindeutig sein müssen, damit sie ordnungsgemäß funktioniert

http://plnkr.co/edit/He0ZmnJ4c72aQA9ggsl6?p=preview

Javascript

$(document).ready(function() { 
    $("#close1").on('click', function() { 
    $("#id1").fadeOut(); 
    }); 
    $("#close2").on('click', function() { 
    $("#id2").fadeOut(); 
    }); 
    $("#close3").on('click', function() { 
    $("#id3").fadeOut(); 
    }); 
}); 

function show(elementId) { 
    document.getElementById("id1").style.display = "none"; 
    document.getElementById("id2").style.display = "none"; 
    document.getElementById("id3").style.display = "none"; 
    document.getElementById(elementId).style.display = "block"; 
} 

Html

<body> 
<h1>Hello Plunker!</h1> 

<div class="container-fluid wow fadeInLeft" id="about-sec"> 
<div class="back2"> 
    <div class="abt-right"> 
    <div class="abt-btn1" onclick="show('id1');">Job Experience</div> 
    <div class="abt-btn2" onclick="show('id2');">Education</div> 
    <div class="abt-btn3" onclick="show('id3');">Timeline</div> 

    <div id="id1"> 
     <div class="abt-content" id="abt-content1"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. 
     <span id="close1">×</span> 
     </div> 
    </div> 
    <div id="id2"> 
     <div class="abt-content" id="abt-content2"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. 
     <span id="close2">×</span> 
     </div> 
    </div> 
    <div id="id3"> 
     <div class="abt-content" id="abt-content3"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. 
     <span id="close3">×</span> 
     </div> 
    </div> 
    </div> 
    </div> 
    </div> 
    </body> 

Answer 2

müssen Sie jQuery enthalten, wenn Sie es verwenden möchten.

können Sie es hier herunterladen: https://jquery.com/

oder einfach nur ein Skript-Tag hinzufügen und laden, wenn von den Google-Servern

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

hoffe, das hilft