Question

我正在尝试使用JS和PHP来指示某些导航是否可见。首先，我得到一系列图像的累积高度。然后我将这个高度与容器的高度进行比较。如果图像的高度较大，则应显示导航div。

这几乎可行，但出于某种原因，我的JS变量'divheight'没有收集图像高度。有谁能发现我的问题？

请注意，$ count是图像的数量，#th_将是最终图像的ID。

<script>
    $('#th_<?php echo $count; ?>').ready(function() {
        var divheight = 0;
        //alert('Number of images: <? echo $count; ?>');
        <?php
        $msg = '';
        for ( $i = 1; $i <= $count; $i++ ) {
            ?>//alert('Cumulative height of images: 'divheight); <?
            //$msg .= 'divheight += parseInt( $("#th_' . $i . '").height() );';
            $msg .= 'divheight += parseInt( document.getElementById("th_' . $i . '").height );';// . "\n";
        }
        echo $msg;
        ?>
        //alert( '<? echo $msg; ?>' ); 
        alert( divheight + ':' + $('#ThumbContainer').height() );
        if ( divheight < $('#ThumbContainer').height() ) {
            $("#ProdDetailsHoverUp").hide();
            $("#ProdDetailsHoverDown").hide();
        }
    });
</script>

注意，我已经使用JQuery和DOM方法来获取图像的高度。

提前感谢您的帮助。

Answer 1

如果您愿意，您可以单独使用javascript完成此操作。假设您想要#ThumbContainer选择的容器中所有图像的总高度，您可以使用：

var divheight = 0;
$('#ThumbContainer img').each(function () {
  divheight += $(this).height();
});
alert(divheight);

Answer 2

根据jQuery文档，你不能将ready事件附加到除“document”之外的任何其他事件上，你应该使用.load（）代替。

但是，根据实际脚本的应用，您需要等待所有图像加载，然后才能安全地使用每个图像的高度值，因为如果图像未加载，它将为零。在那个阶段开始准备的DOM对你没有帮助。

Answer 3

可以考虑使用getimagesize()在php中获取图像大小，并将总数传递给js变量，或者将一个类添加到php中的容器中，这将使它们在页面加载时隐藏

http://php.net/manual/en/function.getimagesize.php

如何获得一系列图像的累积高度？

3 个答案: