Question

我有一个网站，其中查询事件并在索引页面上显示。单击查询结果中的图像后，会弹出一个模态。

由于我有多个图像，我想根据点击的图像动态显示模态中每一行的内容。目前，我可以单击任何图像并显示模态，但它们都包含来自行[0]的数据。

INDEX PAGE：

        while($row = $result->fetch_assoc()) {
        include 'testModal.php';
        echo "<tr><td><figure><figcaption style='padding-bottom:20px'>" . $row["name"]."</figcaption>".
        '<img class="modalBtn" style="width:15em; height:17em;" src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/></figure></td>'.
            "<td>".$row["category"]."</td>".
            "<td> $".$row["price"]."</td>".
            "<td>".$row["age"]."</td>".
            "</tr>";
        }
    ?>

以下是模态页面。

MODAL PAGE：

<div id="TheModalTest" class="modal">

<div class="modal-content">
<div class="modal-header">
    <span class="close" onclick="closeWindow()">X</span>
</div>
<div>
   <?php echo '<img style="width:15em; height:17em;" 
src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>'; ?>
</div>
 <?php  echo '<p class="desc">'.$row["description"].'</p>' ?>
<div class="modal-footer">
    <h3>BOOK NOW</h3>
</div>
</div>    
</div>
      <script>
          //get modal
          var Testmodal = document.getElementById('TheModalTest');
          //get button that opens modal
          //var modalbtn = document.getElementById('modalbtn');
          var modalbtn = document.getElementsByClassName('modalBtn');
          console.log("Length: " + modalbtn.length);
          //Open modal when btn click
          for (var i = 0; i < modalbtn.length+1; i++ ) {
              console.log("I IS: " + i);

                 modalbtn[i].onclick = function(){
                console.log("MODAL IS: " + modalbtn[i]);
              Testmodal.style.display = "block";

          }
    }

      </script>

以下图片是它的样子。当我点击Kanye的事件图像时，模态会弹出他的图像。但是，如果我点击Katy Perry的图像，模态会随着Kanye弹出。

https://i.imgur.com/YhIoXmT.png

https://i.imgur.com/AaqxChj.png

Answer 1

您的问题有些不清楚，请尝试提供输出屏幕截图并对其进行标记。因为我不知道输出。但是

我已将你的mysql代码重写为foreach所以你可以使用foreach图像。

while($row1 = $result->fetch_assoc()) {
foreach($row1 as $row){
include 'testModal.php';
echo "<tr><td><figure><figcaption style='padding-bottom:20px'>" . $row["name"]."</figcaption>".
'<img class="modalBtn" style="width:15em; height:17em;" src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/></figure></td>'.
    "<td>".$row["category"]."</td>".
    "<td> $".$row["price"]."</td>".
    "<td>".$row["age"]."</td>".
    "</tr>";
}
}

将上述代码替换为旧代码。希望它有效。

Answer 2

尽量不要混合“和”。只需坚持使用php和js的单引号，它就会让你在启动时更简单。

您需要做的是使用要传递给模态的数据向元素添加属性，而不是使用js获取该属性的值。

通知：data-category="'.$row['category'].'"以下

<?
   while($row = $result->fetch_assoc()) {
    include 'testModal.php';
    echo '<tr><td><figure><figcaption style="padding-bottom:20px">' . $row['name'].'</figcaption>'.
        '<img data-category="'.$row['category'].'" class="modalBtn" style="width:15em; height:17em;" src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/></figure></td>'.
        '<td>'.$row['category'].'</td>'.
        '<td> $'.$row['price'].'</td>'.
        '<td>'.$row['age'].'</td>'.
        '</tr>';
    }
?>

现在在模态中......注意category = modalbtn[i].getAttribute('data-category');

<div id="TheModalTest" class="modal">

<div class="modal-content">
<div class="modal-header">
    <span class="close" onclick="closeWindow()">X</span>
</div>
<div>
   <?php echo '<img style="width:15em; height:17em;" 
src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>'; ?>
</div>
 <?php  echo '<p class="desc">'.$row["description"].'</p>' ?>
<div class="modal-footer">
    <h3>BOOK NOW</h3>
</div>
</div>    
</div>
      <script>
          //get modal
          var Testmodal = document.getElementById('TheModalTest');
          //get button that opens modal
          //var modalbtn = document.getElementById('modalbtn');
          var modalbtn = document.getElementsByClassName('modalBtn');

          console.log("Length: " + modalbtn.length);
          //Open modal when btn click
            for (var i = 0; i < modalbtn.length+1; i++ ) {
                console.log("I IS: " + i);

                modalbtn[i].onclick = function(){
                    console.log("MODAL IS: " + modalbtn[i]);

                      /// here your go
                      var category = modalbtn[i].getAttribute('data-category');
                      console.log('category',category);


                    Testmodal.style.display = "block";

                }
            }

      </script>
<script>

动态显示模态中$行的内容

2 个答案: