Question

我遇到了问题。我试图在点击时激活一个灯箱，但是它会打开所有模态窗口而不是每个窗口都是单独的。

我正在考虑使用data-id通过wordpress输出帖子/页面ID /＃但我不确定如何使用jQuery触发/工作。

的jQuery

$(".portfolio-item a[data-toggle='modal']").on("click", function(){ 
             console.log('click');
             $(".modal").modal();

           });

点击

   <a href="#myModal" data-id="<?php the_ID(); ?>" data-toggle="modal"  >

                    <h3><?php the_title(); ?></h3>

            </a>
 <a href="#myModal" data-id="<?php the_ID(); ?>" data-toggle="modal"  >

                    <h3><?php the_title(); ?></h3>

            </a>

模态窗口

 <div class="modal-portfolio modal " id="modal" data-id="<?php the_ID(); ?>">
        <div class="modal-content">
          <div class="modal-close" data-dismiss="modal"></div>
          <div class="container">
            content box

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

 <div class="modal-portfolio modal " id="modal" data-id="<?php the_ID(); ?>">
        <div class="modal-content">
          <div class="modal-close" data-dismiss="modal"></div>
          <div class="container">
            content box 2

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

Answer 1

Id必须是唯一的，因此您不需要在内容div中添加相同的ID，而是需要添加从服务器返回的ID，然后为需要显示的div优先使用锚标记data-id：

<div class="modal-portfolio modal " id="<?php the_ID(); ?>">
        <div class="modal-content">
          <div class="modal-close" data-dismiss="modal"></div>
          <div class="container">
            content box

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

 <div class="modal-portfolio modal " id="<?php the_ID(); ?>">
        <div class="modal-content">
          <div class="modal-close" data-dismiss="modal"></div>
          <div class="container">
            content box 2

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

然后在jquery中：

$(".portfolio-item a[data-toggle='modal']").on("click", function(){ 
  $("#"+$(this).data('id')).modal();
});

说明：

this引用方法中使用的对象来引用调用方法的对象。

参考链接：

http://learn.jquery.com/javascript-101/this-keyword/

What is this

this and $(this) in Jquery Callbacks

Answer 2

您需要使用唯一ID。你也应该使用jQuery（this）来查找你的数据ID并从你的点击功能中调用modal（）。

http://learn.jquery.com/javascript-101/this-keyword/

单击所有模态窗口而不是每个窗口打开jquery问题

2 个答案:

说明：

参考链接：