在 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();
});