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>

脚本：

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

据我所知，当我点击例如myBtn-1时，我必须得到模态myModal-1。但是我总是得到所有可用帖子的最后一个模态，看着我的代码是＆＃34;工作正常＆＃34;。

有什么想法吗？谢谢！

Answer 1

您必须将$post_id添加到var 现在你在每个后续脚本中覆盖btn（假设你正在回显post_id循环中的那个脚本）。

然而，整个方法都很糟糕。使用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) {
    	$(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>

Answer 2

解决方案非常简单：

将ID作为data-target="#ViewDevice-<?php the_ID(); ?>添加到按钮上
然后将相同的ID添加到您的模式中，例如id="ViewDevice-<?php the_ID(); ?>

完整的代码示例如下

 <button type="button" class="defaultbtn" data-toggle="modal" data-target="#ViewDevice-<?php the_ID(); ?>" >open my unique modal thanks to @jerryurenaa</button>



<div class="modal fade" id="ViewDevice-<?php the_ID(); ?>">
  <div class="modal-dialog modal-dialog-centered modal-lg ">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">title goes here or make it dynamic :D </h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
     <p>make content dynamic as needed</p>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
     
        <button href="/" class="btn btn-primary"> website</button> 
      </div>

    </div>
  </div>
</div>

循环wordpress

2 个答案: