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

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

您正在为变量$height保存jQuery对象$(this)

设为： var $height = $(this).height(); 你会全力以赴。

Answer 4

问题出在你的事件处理程序中：

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

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

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

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

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