【发布时间】：2017-09-18 19:33:15
【问题描述】：
我正在尝试创建一个加载可用酒店房间的 CMS 页面。有一些与我遇到的问题有关的关键功能......有三个 div（这些是具有酒店房间不同视图的缩略图），然后是一个 div，它是一个预览 div（它显示您当前的任何图像）当前悬停在 - 当您将鼠标移出缩略图 div 时，会显示默认图像）...
HTML、CSS、MySQL、PHP 完美运行。 div 全部成功填充到页面上。
但是，我遇到了缩略图 div 的问题。例如，当我将鼠标悬停在第一个元素的 .thumbOne div 上时，.preview div 会显示最后一个元素的随机图像。 .thumbTwo 和 .thumbThree 也一样。它们都显示最后一个元素的值。
然后当我转到第二个元素并将鼠标悬停在其中一个缩略图上时，第二个元素没有任何变化 - 但是这将显示链接到第一个元素中最后一个元素的值或图像 - 与前一个相同场景。
不知道我做错了什么。但我的猜测是，这与 getElementById 有关 - ID 应该是唯一的，我理解。 也许我应该使用 getElementsByClassName - 但我试过这个并没有奏效。以下是我的代码：
<div class="mainContainer">
<div class="containerMainContentSOne">
<table border='0' align='center' width='800px' height='250px'>
<tr>
<?php while ($row = $rs_result->fetch_assoc()){ ?>
<script type="text/javascript">
function thumbnailOneHover() {
document.getElementById("preview").src = "<?php echo ($row['mediaThumbnailOne']); ?>";
}
function thumbnailTwoHover() {
document.getElementById("preview").src = "<?php echo ($row['mediaThumbnailTwo']); ?>";
}
function thumbnailThreeHover() {
document.getElementById("preview").src = "<?php echo ($row['mediaThumbnailThree']); ?>";
}
function thumbnailLeave() {
document.getElementById("preview").src = "<?php echo $row['defaultImage']; ?>";
}
</script>
<td width='700' height='248' valign='top'>
<div class="previewContainer">
<div class="previewThumbnail">
<div class="previewHotel">
<a href='#'><img class="preview" id="preview" src="<?php echo $row['defaultImage']; ?>" /></a>
<div class="thumbnailContainer">
<div class="thumbnailContainerOne"><img class="thumbnailOne" id="thumbnailOne" onmouseover="thumbnailOneHover()" onmouseout="thumbnailLeave()" src="<?php echo $row['mediaThumbnailOne']; ?>" /></div>
<div class="thumbnailContainerTwo"><img class="thumbnailTwo" id="thumbnailTwo" onmouseover="thumbnailTwoHover()" onmouseout="thumbnailLeave()" src="<?php echo $row['mediaThumbnailTwo']; ?>" /></div>
<div class="thumbnailContainerThree"><img class="thumbnailThree" id="thumbnailThree" onmouseover="thumbnailThreeHover()" onmouseout="thumbnailLeave()" src="<?php echo $row['mediaThumbnailThree']; ?>" /></div>
</div>
</div>
</div>
</div>
</td>
</tr>
<?php }; ?>
</table>
</div>
请原谅我的模棱两可的 div...
所以我尝试了几件事。 尝试使用 getElementsByClassName：
<script type="text/javascript">
function thumbnailOneHover() {
var x = document.getElementsByClassName("preview");
var i;
var y = <?php echo $row ?>;
for (i = 0; i <= y; i++) {
x[i].src = "<?php echo ($row['mediaThumbnailOne']); ?>";
}
}
function thumbnailTwoHover() {
var x = document.getElementsByClassName("preview");
var i;
var y = <?php echo $row ?>;
for (i = 0; i <= y; i++) {
x[i].src = "<?php echo ($row['mediaThumbnailTwo']); ?>";
}
}
function thumbnailThreeHover() {
var x = document.getElementsByClassName("preview");
var i;
var y = <?php echo $row ?>;
for (i = 0; i <= y; i++) {
x[i].src = "<?php echo ($row['mediaThumbnailThree']); ?>";
}
}
function thumbnailLeave() {
var x = document.getElementsByClassName("preview");
var i;
var y = <?php echo $row ?>;
for (i = 0; i <= y; i++) {
x[i].src = "<?php echo ($row['defaultImage']); ?>";
}
}
</script>
我在这里遗漏了什么吗？ 提前致谢，很抱歉发了这么长的帖子。
【问题讨论】：
-
一个函数名一次只能分配给一个函数。每次通过 PHP 循环时，您都在定义相同的函数，最后它只有最后一个定义。您应该定义一次函数，并让它们接受参数，告诉它们要显示哪个图像以及在哪个 DIV 中显示它。
-
如果我理解的很清楚，我应该从while循环中删除这四个函数吗？在while循环逻辑之前插入这个？
-
对。然后只需将适当的参数放入对
onmouseover和onmouseout属性中的函数的调用中。 -
谢谢。我应该试一试，让你知道。
-
是的，还是没有运气......
标签： javascript php html