ループ内のモーダル

Question

私はこれについて読んで、成功していない別のものを試してきました。私は別の投稿とループを持って、私はそれを押すと、投稿を共有するためのモーダルが開かれているボタンがあります。

各モーダルに一意のIDを追加しようとしていたので、正しいモーダルと正しい共有リンクをクリックして開きます。しかし、動作していません。

<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> 

、スクリプト：だから私は、例えば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> 

この

は私が私のモーダル内部で使用していたコードですモーダルmyModal-1。しかし、私は常に私の利用可能なすべての投稿の最後のモーダルを取得し、私のコードを見て "うまく働く"です。

ありがとうございました！

Answer 1

varに$post_idを追加する必要があります。
今度は、すべての後続スクリプトでbtnを上書きしています（あなたのpost_idループの中でthatzスクリプトをエコーし​​ていると仮定します）。

しかし、この全体のアプローチは悪いです。 jQueryを使用して、すべてのリンクに同じコードを割り当てます。リンクコードでは、コンテナ<div>まで移動し、クラスに戻って要素を探します。

(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>