Verwenden von .getElementsByClassName für den Zugriff auf mehrere Popups

Question

Ich versuche, das folgende Javascript zu verwenden, um verschiedene Popups zu erstellen.Image Popups beim Klicken auf Text. Das Problem ist, dass alle Popup-Bilder angezeigt werden, wenn ich auf einen der Textcontainer klicke. Ich weiß, dass mir etwas offensichtlich fehlt. Jede Hilfe würde sehr geschätzt werden. Hier ist der JS-Code:

function myFunction() { 

var popup = document.getElementsByClassName("myPopup"); 

for(var i=0; i<popup.length; i++) { 

popup[i].classList.toggle('show'); 
} 
} 

HTML:

<div class="popup" onclick="myFunction()"><span class="castName">Viola,</span> 
<span class="popuptext myPopup"><img src=Viola_1.jpg   
style="width:300px;height:100%;" alt="Viola"><p>Miss Ellen Terry as Viola, mid 
to late 19th century</p></span></div> 

Answer 1

Ihre Funktion wird eine Liste von Elementen und drücken Sie dann die Klasse 'Show' zu jedem Element anstelle des Elements Sie wollen. Sie müssen das Element an die Funktion übergeben.

Sie können die Onclick-Ereignis für jedes div ändern:

<div class="popup" onclick="myFunction()"> 

zu:

<div class="popup" onclick="myFunction(this)"> 

Dann in Ihrem Javascript

function myFunction(element){ 
    if (element){ //If the element is passed into this function 
     element.getElementsByClassName("myPopup")[0].toggle('show'); 
    } 
} 

Answer 2

Thum, das war sehr hilfreich. Ich habe am Ende den HTML-Code geändert, wie du es vorgeschlagen hast, und folgendes zum Javascript getan, was perfekt funktioniert hat: