JQuery Anruf Popup

Question

Ich bin ein Lehrling und habe nie mit Javascript gearbeitet. Meine Javascript-Funktion ruft ein Popup auf. Dies funktioniert auf der ersten Schaltfläche, funktioniert aber nicht auf allen folgenden und da die Anwendung ständig Schaltflächen (gleiche Klasse) hinzufügt, kann ich nicht fest codieren. Ich nehme an, es wird eine Lösung mit JQuery ... ("open") und ("openPopupUseExisting") sind die beiden Schaltflächen.

<script type="text/javascript"> 
    window.onload = function() { 
     document.getElementById('blackout').addEventListener('click', function() { 
      document.getElementById('popup').className = ""; 
      document.getElementById('blackout').className = ""; 
      document.getElementById('popupUseExisting').className = ""; 
     }, false); 
     document.getElementsByClassName("open")[0].addEventListener('click', function() { 
      document.getElementById('popup').className = 'visable'; 
      document.getElementById('blackout').className = 'visable'; 
     }, false); 
     document.getElementsByClassName("openPopupUseExisting")[0].addEventListener('click', function() { 
      document.getElementById('popupUseExisting').className = 'visable'; 
      document.getElementById('blackout').className = 'visable'; 
     }, false); 
     document.getElementsByClassName("close")[0].addEventListener('click', function() { 
      document.getElementById('popup').className = ""; 
      document.getElementById('blackout').className = ""; 
      document.getElementById('popupUseExisting').className = ""; 
     }, false); 
    }; 
</script> 

Answer 1

document.getElementsByClassName("close")[0] 

Sehen Sie, dass 0?

getElementsByClassName gibt ein Array-ähnliches Objekt zurück. Du bekommst den ersten Gegenstand davon.

Schleife über es mit einer for Schleife.

Answer 2

Freund, Sie müssen keine vollständige Bibliothek hinzufügen, nur um dynamisch hinzugefügte Elemente zu binden.

Sie können das document für Click-Ereignis binden und dann überprüfen, ob das angeklickte Element das gewünschte Element ist. Es verhindert, dass dynamisch hinzugefügte Elemente nicht gebunden werden, da es auf das gesamte Dokument abzielt.

document.addEventListener('click', function (e) { 
    if (e.target.classList.contains('blackout')) { 
     // your fancy magic with .blackout 
    } else if (e.target.classList.contains('open')) { 
     // your fancy magic with .open 
    } 
}, false); 

Wenn Sie wirklich jQuery verwenden möchten, wie Sie bestellt haben, es ganz einfach ist, verwenden Sie die on Methode

$('.open').on('click', function(){ 
    // your fancy magic with .open 
});