Question

我有以下jQuery找到响应式图像的高度：

        $(document).ready( function() { //Fires when DOM is loaded
            getImageSizes();
            $(window).resize(function() { //Fires when window is resized
                getImageSizes();
            });
        });
        function getImageSizes() {
            $("#slideshow img").each(function() {
                var $height = $(this);
                console.log( $height.height() );

            });

        }

我的目标是使用$ height变量来指定具有幻灯片显示ID的div的高度。

我认为我可以使用它：

$('#slideshow').css({'height': $height + 'px;'});

然而它不起作用（没有指定高度）。

我包括上面这样的行：

        $(document).ready( function() { //Fires when DOM is loaded
            getImageSizes();
            $(window).resize(function() { //Fires when window is resized
                getImageSizes();
            });
        });
        function getImageSizes() {
            $("#slideshow img").each(function() {
                var $height = $(this);
                console.log( $height.height() );

                $('#slideshow').css({'height': $height + 'px;'});
            });

        }

我有什么遗失的吗？

Answer 1

您正在记录$height.height()，但之后只在CSS中使用$height。

如果您更好地命名变量，那将更容易：p

var $height = $(this).height();
$("#slideshow").css({"height":$height+"px"});

或者我的偏好：

document.getElementById('slideshow').style.height = this.height+"px";

Answer 2

$height是一个jQuery变量。你需要通过调用.height()来获得它的高度。

$('#slideshow').css({'height': $height.height() + 'px'});

或者，您可以将实际高度存储为变量。

var height = $(this).height();
$('#slideshow').css({'height': height  + 'px'});

Answer 3

您正在为变量$(this)

保存jQuery对象$height

成为：var $height = $(this).height();，你将全力以赴。

Answer 4

问题在于您的事件处理程序：

        function() {
            var $height = $(this);
            console.log( $height.height() );

            $('#slideshow').css({'height': $height + 'px;'});
        }

您正在尝试与$height（一个字符串）连接'px;'（这是一个jQuery对象）。最终会出现字符串'[object Object]px;'，这显然不是您想要的。您需要使用高度值。这就是我想你想要的：

        function() {
            var height = $(this).height();
            console.log( height );

            $('#slideshow').css({'height': height + 'px'});
        }

如何在CSS属性中使用jQuery变量

4 个答案: