Modal innerhalb einer Schleife wordpress

Question

Ich habe darüber gelesen und verschiedene Dinge ohne Erfolg versucht. Ich habe eine Schleife mit verschiedenen Posts und ich habe einen Knopf, der, wenn ich darauf drücke, ein Modal geöffnet hat, um den Post zu teilen.

Ich habe versucht, jedem Modal eine eindeutige ID hinzuzufügen, also wenn ich darauf klicke, öffne das richtige Modal mit den richtigen Share Links. Es funktioniert jedoch nicht.

Dies ist der Code, den ich in meinem modal bin mit:

<a id="myBtn-<?php echo $post_id; ?>" href="#"><span class="share-text">Compartir</span></a> 

<!-- The Modal --> 
<div id="myModal-<?php echo $post_id; ?>" class="modal-share"> 
<!-- Modal content --> 
<div class="modal-share-content"> 
<div class="wrapper"> 
    <div class="modal-share-header"> 
    <span class="close-share">&times;</span> 
    <h2>¿Dónde quieres compartirlo?</h2> 
    <h3><?php the_title(); ?></h3> 
    <div class="date"><?php 
     $dateformatstring = "D d M"; 
     $unixtimestamp = strtotime(get_field('fecha')); 
     echo date_i18n($dateformatstring, $unixtimestamp); 
     ?></div> 
    </div> 
    <div class="modal-body"> 
    <ul> 
     <li class="mobile-only"><a class="share-whatsapp" target="_blank" href="whatsapp://send?text=<?php the_permalink(); ?>" data-action="share/whatsapp/share"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li> 
     <li class="mobile-only"><a class="share-messenger" target="_blank" href="fb-messenger://share?link=<?php the_permalink(); ?>"><i class="fa fa-comment" aria-hidden="true"></i></a></li> 
     <li class="desktop-only"><a class="share-messenger" target="_blank" href="https://www.facebook.com/dialog/send?app_id=1385443625036469&redirect_uri=http://www.fanonfire.com/gracias-por-compartir/&display=popup&link=<?php the_permalink(); ?>"><i class="fa fa-comment" aria-hidden="true"></i></a></li> 
     <li class="fb"><a class="share-facebook" target="_blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> 
     <li class="tw"><a class="share-twitter" target="_blank" href="https://twitter.com/share?url=<?php the_permalink(); ?>&amp;lang=es&amp;text=Vente a <?php the_title(); ?> en Madrid via @fanonfire"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> 
    </ul> 
    </div> 
    </div> 
</div> 
</div> 

und das Skript: myBtn-1

<script> 
var modal = document.getElementById('myModal-<?php echo $post_id; ?>'); 
var btn = document.getElementById("myBtn-<?php echo $post_id; ?>"); 
var span = document.getElementsByClassName("close-share")[0]; 
btn.onclick = function() { 
modal.style.display = "block"; 
} 
span.onclick = function() { 
modal.style.display = "none"; 
} 
window.onclick = function(event) { 
if (event.target == modal) { 
    modal.style.display = "none"; 
} 
} 
</script> 

So wie ich es verstehe, wenn ich auf das zum Beispiel auf Ich muss erhalten das modale myModal-1. Allerdings bekomme ich immer das letzte Modal aller meiner verfügbaren Posts und schaue mir meinen Code an "funktioniert gut".

Irgendeine Idee? Vielen Dank!

Answer 1

Sie müssten die $post_id zu Ihrem var s hinzufügen.
Im Moment überschreiben Sie btn in jedem nachfolgenden Skript (vorausgesetzt, dass Sie das Thz-Skript in Ihrer Post-ID-Schleife wiederholen).

Allerdings ist dieser gesamte Ansatz schlecht. Verwenden Sie jQuery, um allen Ihren Links denselben Code zuzuweisen. Suchen Sie im Verknüpfungscode die Elemente, indem Sie zum Container <div> und dann zurück zu den Klassen gehen.

(function($) { 
 
    $(document).ready(function() { 
 
    $(".showModal").click(function(e) { 
 
     e.preventDefault(); 
 
     e.stopPropagation(); 
 
     $parent = $(this).parent(); 
 
     $(".modal-share").hide(); 
 
     $parent.find(".modal-share").show(); 
 
    }); 
 
    $(".close-share").click(function(e) { 
 
    \t $(this).parent().hide(); 
 
    }); 
 
    $(document).click(function(e) { 
 
     if (!$(e.target).hasClass("modal-share")) 
 
     $(".modal-share").hide(); 
 
    }); 
 
    }); 
 
})(jQuery);

.post { 
 
    background-color: grey; 
 
    margin: 1rem; 
 
    position: relative 
 
} 
 

 
.modal-share { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 200px; 
 
    background-color: green; 
 
    border: 2px solid red; 
 
    display: none 
 
} 
 
.close-share { 
 
    position: absolute; 
 
    right: 0 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="post"> 
 
    <p> 
 
    Post One 
 
    </p> 
 
    <a class="showModal" href=""><span class="share-text">Compartir</span></a> 
 
    <div class="modal-share">Modal One<span class="close-share">X</span></div> 
 
</div> 
 
<div class="post"> 
 
    <p> 
 
    Post Two 
 
    </p> 
 
    <a class="showModal" href=""><span class="share-text">Compartir</span></a> 
 
    <div class="modal-share">Modal Two<span class="close-share">X</span></div> 
 
</div> 
 
<div class="post"> 
 
    <p> 
 
    Post Three 
 
    </p> 
 
    <a class="showModal" href=""><span class="share-text">Compartir</span></a> 
 
    <div class="modal-share">Modal Three<span class="close-share">X</span></div> 
 
</div>