如何在 CSS 属性中使用 jQuery 变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15209049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use a jQuery variable in CSS property
提问by Raphael Rafatpanah
I having the following jQuery which finds the height of a responsive image:
我有以下 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() );
});
}
And my goal is to use the $height variable to specify the height of a div with the ID of slideshow.
我的目标是使用 $height 变量来指定带有幻灯片 ID 的 div 的高度。
I assume I can use this:
我假设我可以使用这个：
$('#slideshow').css({'height': $height + 'px;'});
However it is not working (no height is specified).
但是它不起作用（没有指定高度）。
I included the above line like so:
我像这样包含了上面的行：
$(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;'});
});
}
Is there something I am missing?
有什么我想念的吗？
采纳答案by Niet the Dark Absol
You are logging $height.height(), but then only using $heightin the CSS.
您正在记录$height.height()，但仅$height在 CSS 中使用。
If you named your variables better, it would be easier :p
如果你更好地命名你的变量，那就更容易了：p
var $height = $(this).height();
$("#slideshow").css({"height":$height+"px"});
Or my preference:
或者我的偏好：
document.getElementById('slideshow').style.height = this.height+"px";
回答by lonesomeday
The problem is in your event handler:
问题出在您的事件处理程序中：
function() {
var $height = $(this);
console.log( $height.height() );
$('#slideshow').css({'height': $height + 'px;'});
}
You're attempting to do $height(which is a jQuery object) concatenated with 'px;'(a string). This ends up with the string '[object Object]px;', which obviously isn't what you want. You need to use the value of the height instead. This is I think what you want:
您正在尝试将$height（这是一个 jQuery 对象）与'px;'（一个字符串）连接起来。这以 string 结束'[object Object]px;'，这显然不是您想要的。您需要改用高度的值。这是我认为你想要的：
function() {
var height = $(this).height();
console.log( height );
$('#slideshow').css({'height': height + 'px'});
}
回答by jrummell
$heightis a jQuery variable. You need to get the height of it by calling .height().
$height是一个 jQuery 变量。您需要通过调用来获取它的高度.height()。
$('#slideshow').css({'height': $height.height() + 'px'});
Or, you could store the actual height as a variable instead.
或者，您可以将实际高度存储为变量。
var height = $(this).height();
$('#slideshow').css({'height': height + 'px'});
回答by Mark Pieszak - Trilon.io
You are saving the jQuery object $(this)for your variable $height
您正在$(this)为变量保存 jQuery 对象$height
Make it: var $height = $(this).height();and you'll be all set.
成功：var $height = $(this).height();一切就绪。
