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

【问题标题】：How to use a jQuery variable in CSS property如何在 CSS 属性中使用 jQuery 变量
【发布时间】：2013-02-18 23:35:58
【问题描述】：

我有以下 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;'});
            });

        }

我有什么遗漏吗？

【问题讨论】：

我们可以在 jsfiddle 中看到这个吗？
您知道#slideshow 的height 将是最后一张图片的高度。因此，如果$("#slideshow img") 高度中的最后一张图像是 10，那么这就是您的#slideshow 高度。
我还不确定。好消息是每个图像的高度相同，所以我考虑先找到响应式图像的高度，然后添加一个在所有视口中看起来都不错的常量，或者添加一个额外的百分比。

标签： jquery html css responsive-design

【解决方案1】：

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

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

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

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

【讨论】：

感谢您的帮助。似乎函数 getImageSizes();页面加载时未正确触发。但它现在在调整大小时确实可以正常工作。控制台在页面加载时报告值为 0。有什么想法吗？

【解决方案2】：

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

制作：var $height = $(this).height();，一切就绪。

【讨论】：

感谢您的帮助。似乎函数 getImageSizes();页面加载时未正确触发。但它现在在调整大小时确实可以正常工作。控制台在页面加载时报告值为 0。有什么想法吗？

【解决方案3】：

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

如果你更好地命名你的变量，它会更容易：p

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

或者我的喜好：

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

【讨论】：

js 版本偏好的任何原因，除了性能？ :O
我认为性能是一个足够好的理由。在 8Kb 内存很大的时代，我可能不在身边，但你不会从我对效率的痴迷中知道这一点！
是的。我只是好奇，在想我是否能学到新东西:)
好的，我得到了这个工作。对不起，我从上一个堆栈溢出问题中找到了代码。我对 jQuery 非常非常陌生！似乎我的功能在页面加载时没有得到高度，只是在调整大小时。有什么建议吗？

【解决方案4】：

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

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

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

您正在尝试将$height（这是一个jQuery对象）与'px;'（一个字符串）连接起来。这以字符串'[object Object]px;' 结尾，这显然不是您想要的。您需要改用高度的值。这是我认为你想要的：

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

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

【讨论】：

感谢您的帮助。似乎函数 getImageSizes();页面加载时未正确触发。但它现在在调整大小时确实可以正常工作。控制台在页面加载时报告值为 0。有什么想法吗？