Versuch, den korrelierenden modalen Inhalt anzuzeigen, wenn der modale Trigger geklickt wird

Question

Ich habe Schwierigkeiten, meine eigene einfache modale Erfahrung für mein Portfolio zu erstellen. Alles, was ich versuche, ist, dass der Benutzer auf ein Bild klickt und eine modale Box mit den Informationen öffnet, die mit dem angeklickten Bild korrelieren. Das ist alles gut und schön, aber ich kann Jquery nicht dazu bringen, das programmatisch zu machen. Ich bin rostig mit meinem Javascript und etwas klickt nicht in mein Gehirn, ich weiß, das sollte nicht schwer sein.

Hier ist mein html

<div class="projects"> 
    <div class="projects__grid"> 
     <a class="modal-trigger" data-target="modal1"> 
     <div class="projects__image"> 
      <div class="modal" id="modal1"> 
      <div class="project__desc modal-content"> 
       <p class="text">1st modal test --- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptas laborum, porro dignissimos quis quod eius. Cupiditate, laborum, eligendi eaque magni maiores placeat, sint voluptate quos dicta ad fugit corporis. 
       </p> 
      </div> 
      </div> 
     </div> 
     </a> 

     <a class="modal-trigger" data-target="modal2"> 
     <div class="projects__image"> 
      <div class="modal" id="modal2"> 
      <div class="project__desc modal-content"> 
       <p class="text">2nd modal test --- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptas laborum, porro dignissimos quis quod eius. Cupiditate, laborum, eligendi eaque magni maiores placeat, sint voluptate quos dicta ad fugit corporis. 
       </p> 
      </div> 
      </div> 
     </div> 
     </a> 
    </div> 
</div> 

sicher, dass ich nur benutzerdefinierte Klassen oder IDs für jeden modal Trigger schaffen könnte, aber ich will meinen Code trocken halten. Ich habe versucht:

$(this, '.modal-trigger').click(function() { $(this, '.modal').toggle(); })

und viele andere ähnliche Angriffswinkel. Was fehlt mir hier? Ich muss nur die geschachtelte ID für den verwandten modalen Inhalt abrufen, unabhängig davon, auf welchen Modal-Trigger geklickt wird. Ich weiß, dass ich irgendwie "dieses" benutzen muss, aber ich kann es nicht herausfinden.

Vielen Dank für einen Einblick, sorry, wenn dies vorher gepostet wurde, konnte ich nichts finden, was meine Frage beantwortete ... irgendwie.

Answer 1

ich eine Geige gemacht haben, wo diese

jsfiddle

$('.modal-trigger').click(function(event) { 
    let modalExample = $(this).find('.modal'); 
    modalExample.toggle(); 
}); 

Sie dies in Ihrem Klick-Ereignis