Question

我是PHP和Java Script的新手。我有一个表格，其中有5行和3列。在每一行中都有一个图像显示在列中。图像路径存储在db表中。所以当我从db表中获取结果时，图像会正确显示。我点击时使用js和css弹出图像。但问题是图像的顶行只有弹出窗口而其他图像无法弹出。这是php代码：

<table align = "center" border="1" cellspacing="7" cellpadding="7"> 
 <tr>
    <th>S.No.</th><th>Service ID</th><th>Service Type</th></th><th>Alloted Serviceman</th><th>service/Complaint Detail</th><th>Current Status</th><th>Service/Complaint Date</th><th>Payment</th><th>Service image</th>
</tr>
<?php
while($row1 = mysqli_fetch_array($result1))
{
?>

<tr>
    <td><?php echo ++$i;?></td><td><a href="servicedetail.php?scode=<?php echo $row1['service_id'];?>"><?php echo $row1['service_id'];?></a></td><td><?php echo $row1['service_type'];?></td><td><?php echo $row1['technician_name'];?></td><td style="max-width:200px;"><?php echo $row1['service_detail'];?></td><td><?php if ($row1['status'] == 1) { echo "Confirmed" ;} else { echo "Pending"; }?></td><td><?php echo $row1['service_date'];?></td><td><?php echo $row1['service_charges'];?></td><td><img id="myImg" src = "./<?php echo $row1['s_image'];?>" alt= "upload image" height="50" width="80"/></td>
</tr>

<?php } ?>
</table>
</fieldset>
<!-- The Modal -->                              
 <div id="myModal" class="modal">
  <!-- The Close Button -->
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">
  <!-- Modal Caption (Image Text) -->
</div>

下面是java脚本文件代码，它有助于弹出图像

// Get the modal
var modal = document.getElementById('myModal');
//window.alert(modal);
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}

它显示表格列中的所有图像。但只会弹出行图像的顶部。在其他我点击图像，但它不能弹出。请提供解决方案。谢谢..

Answer 1

there should only be one unique id in HTML

而不是id，使用类，并使用符合getElementByClassName（）的文件来获取数组中的所有节点

编辑：我在床上，我不想在手机上使用编辑器

ID在页面中应该是唯一的。但是，如果不止一个具有指定ID的元素，getElementById（）方法返回源代码中的第一个元素。

因此：

<img class="myImg"

img = document.getElementByClassName('myImg');

Answer 2

在Stackoverflow用户的帮助下，我能够解决这里的问题是代码

 var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementsByClassName('myImg');
//window.alert(img);
var i = img.length;
var j;
var modalImg = document.getElementById("img01");

//var captionText = document.getElementById("caption");
for(j=0;j<i;j++) {
    img[j].onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
  //  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");

// When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
  modal.style.display = "none";
}
}

我只是在php

中使用图像标签中添加类myImg

如何通过点击屏幕上的表格列来弹出图像

2 个答案: