Javascript 动态显示模式中$row的内容

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

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

索引页：

        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>";
        }
    ?>

while（$row=$result->fetch_assoc（））{
包括“testModal.php”；
回显“$row[“name”]”。
''.
“.$row[“category”]”。
“$”$行[“价格”]。”。
“.$row[“age”]”。
"";
}
?>

下面是模式页面

模式页面：

        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>";
        }
    ?>

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

X
现在预订
//获得模态
var Testmodal=document.getElementById（'TheModalTest'）；
//获取打开模式的按钮
//var modalbtn=document.getElementById（'modalbtn'）；
var modalbtn=document.getElementsByClassName（'modalbtn'）；
控制台日志（“长度：+modalbtn.Length”）；
        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>";
        }
    ?>

//单击btn时打开模式
对于（变量i=0；i        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>";
        }
    ?>

modalbtn[i].onclick=function（）{ log（“模态为：+modalbtn[i]）；

        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>";
        }
    ?>

Testmodal.style.display=“block”； } } 下图是它的外观。当我为Kanye单击事件图像时，模态会弹出他的图像。然而，如果我点击凯蒂·佩里的图片，会弹出带有坎耶的模态

---

如果您的问题不清楚，请尝试提供输出屏幕截图并标记。因为我不知道输出。 但是

我已将您的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>";
}
}

while（$row1=$result->fetch_assoc（））{
foreach（$row1作为$row）{
包括“testModal.php”；
回显“$row[“name”]”。
''.
“.$row[“category”]”。
“$”$行[“价格”]。”。
“.$row[“age”]”。
"";
}
}

将上述代码替换为旧代码。希望它能起作用。

尽量不要把“和”混在一起。只要坚持用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 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>";
        }
    ?>

<?
   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>';
    }
?>

---

尽量不要将

“

和

”

混在一起，这可能是重复的。只要坚持使用php和js的单引号，就可以在开始时简化。您需要做的是在元素中添加一个属性，其中包含要传递给model的数据，然后使用js获取该属性的值images@PeterJ这两个截图显示的很好。1个屏幕截图显示从所有图像抓取，另一个是弹出模式图像视图，关闭选项正常吗？那么问题是什么呢？弹出的模式，注意Kanye的图像是怎样的，始终是图像，无论我点击另一个事件（例如Katy Perry）。我希望这样，如果我点击凯蒂·佩里，它应该是她的形象，而不是凯蒂·佩里的形象，它似乎仍然不起作用。我已经用图片更新了帖子以寻求帮助。（新代码实施后拍摄的图像）