Question

我正在尝试创建一个加载可用酒店房间的CMS页面。有关于我正在处理的问题的关键功能......有三个div（这些是具有不同酒店房间视图的缩略图）然后有一个div是预览div（这显示你目前的任何图像）目前正在徘徊 - 当您将鼠标移出缩略图div时，会显示默认图像）...

HTML，CSS，MySQL，PHP完美运行。 div在页面上成功填充。

但是我遇到了缩略图div的问题。例如，当我将鼠标悬停在第一个元素的.thumbOne div上时，.preview div会显示最后一个元素的随机图像。与.thumbTwo和.thumbThree相同。它们都显示最后一个元素的值。

然后当我转到第二个元素并将鼠标悬停在其中一个缩略图上时，第二个元素上没有任何变化 - 但是这将显示链接到第一个元素中最后一个元素的值或图像 - 与之前相同场景。

不确定我做错了什么。但我的猜测是，这与getElementById有关 - 我知道ID应该是唯一的。也许我应该使用getElementsByClassName - 但我试过这个并没有用。以下是我的代码：

//Uses computed property names: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names
//If you are wanting to support older browsers, change this accordingly.
var ratioUrls = {
  [16/9]:"https://via.placeholder.com/1920X1080.jpg",
  [4/3]:"https://via.placeholder.com/1024X768.jpg"
}

var userRatio = window.screen.width / window.screen.height;

var img = new Image();
img.src = ratioUrls[userRatio] || "https://via.placeholder.com/other.jpg";
document.body..appendChild(img);

请原谅我暧昧的div ...

所以我尝试过几件事。试图使用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>

我在这里遗漏了什么吗？在此先感谢，并为超长的帖子感到抱歉。

Answer 1

只需定义一次函数，然后让它们获取参数，说明要更新的图像以及从何处获取图像。

ID必须是唯一的。我已经更改了预览图像的ID以包含索引。我已经删除了缩略图的ID，因为它们可能不需要（但如果需要，可以向它们添加$i）。

您还可以从您悬停的图片的src处获取网址，并将默认图片保存在数据属性中。

BTW，<tr>标签需要在循环内。

<script>
function thumbnailHover(thumb, previewId) {
    document.getElementById(previewId).src = thumb.src;
}
function thumbnailLeave(previewId) {
    var img = document.getElementById(previewId);
    img.src = img.dataset.src;
}
</script>
<div class="mainContainer">
<div class="containerMainContentSOne">
    <table border='0' align='center' width='800px' height='250px'>
        <?php
        var i = 0;
        while ($row = $rs_result->fetch_assoc()) {
            $preview_id = "preview-$i"; ?>
            <tr>
                <td width='700' height='248' valign='top'>  
                    <div class="previewContainer">
                        <div class="previewThumbnail">
                            <div class="previewHotel">
                                <a href='#'><img class="preview" id="$preview_id" src="<?php echo $row['defaultImage']; ?>" data-src="<?php echo $row['defaultImage']; ?>" /></a>
                                <div class="thumbnailContainer">
                                    <div class="thumbnailContainerOne"><img class="thumbnailOne" onmouseover="thumbnailHover(self, '<?php echo $preview_id; ?>')" onmouseout="thumbnailLeave('<?php echo $preview_id; ?>')" src="<?php echo $row['mediaThumbnailOne']; ?>" /></div>
                                    <div class="thumbnailContainerTwo"><img class="thumbnailTwo" onmouseover="thumbnailHover(self, '<?php echo $preview_id; ?>')" onmouseout="thumbnailLeave('<?php echo $preview_id; ?>')" src="<?php echo $row['mediaThumbnailTwo']; ?>" /></div>
                                    <div class="thumbnailContainerThree"><img class="thumbnailThree" onmouseover="thumbnailHover(self, '<?php echo $preview_id; ?>')" onmouseout="thumbnailLeave('<?php echo $preview_id; ?>')" src="<?php echo $row['mediaThumbnailThree']; ?>" /></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <?php 
            i++;
        } ?>
    </table>
</div>

循环中的Javascript函数不适用于其他div

1 个答案: