在 PHP 和 DIV HTML 之间传递变量

Question

我有一个网页，其中显示了从数据库中获取的一系列图像，这些图像经过时会向您显示“快速查看”消息（），单击此链接会在页面上显示具有最大图像的 div，我当有人点击这个链接时需要，在 div 中根据我点击的内容向我显示不同的图像，这是我的代码

PHP/HTML 代码

if ($array->num_rows > 0) {         
   while($row = $array->fetch_assoc()) {
       <div>
        <?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['picture'] ).'" />'; ?>
        <a  href="#" class="js-show-modal1">
            Quick View
        </a>
        </div>
    }
}

代码

$('.js-show-modal1').on('click',function(e){
    e.preventDefault();
    $('.js-modal1').addClass('show-modal1');
});

CSS

.show-modal1 {
  visibility: visible;
  opacity: 1;
}

HTML

<div class="js-modal1">
     <img src="images/someimage.jpg">
</div>

这就是我需要的，当我单击此处时： <a href="#" class="js-show-modal1"> Quick View </a>这里显示的是：

 <div class="js-modal1">
       <img src="data:image/jpeg;base64,'.base64_encode( $row['picture'] ).'" />
 </div>

Answer 1

在循环外创建一个计数器，我们将用于索引和定位正确的模式。

我将目标模式存储在我使用data-target的<a></a>标签的数据属性中。

if ($array->num_rows > 0) {
  // initialize counter
  $index = 0;

  while($row = $array->fetch_assoc()) {

    // use the counter in the loop, modal-".$index."
    echo "
      <div>
        <a  href='#' class='js-show-modal' data-target='modal-".$index."'>
          Quick View
        </a>
        <div id='modal-".$index."'>
          <img src='data:image/jpeg;base64,".base64_encode($row['picture'])."' />
        </div>
      </div>";

    // increment
    $index++;
  }
}

然后在下面使用这个脚本。 我们向.js-show-modal添加了一个 onclick 事件处理程序，它将是所有的<a></a>标签。 然后我们将获得data-target属性作为选择器。 我使用切换在 hide() 和 show() 之间切换。

$(document).on('click','.js-show-modal',function(e){
    e.preventDefault();
    var target = '#'+$(this).data('target');
    $(target).toggle();
});