jquery - CSS/jquery if() css效果

Question

不知道为什么这不起作用......

我有几个具有 .rightColumnButton 类的 DIV。其中一些高度为 30px:

.rightColumnButton{
height:30px;
width:206px;
margin-top:20px;
}

如果高度为 30px，我想将 margin-top 更改为 10px:

$(function(){

if($( '.rightColumnButton' ).css("height") == "30"){
    $(this).animate({marginTop: "10px"}, 500);


    }    
} );

对我不起作用。

Answer 1

使用 css('height') 还会返回单位，通常为“px”。因此，在本例中，您要比较 '30px' == '30'。使用 height() 方法返回一个数值并将其与整数进行比较。

此外，您没有指定要为哪个对象设置动画，因为该元素不会在 if 子句中“携带”。在元素上使用 each() 方法来创建闭包:

$(function(){
    $('.rightColumnButton').each(function() {
        if($(this).height() == 30) {
            $(this).animate({marginTop: "10px"}, 500);
        }    
    });
});

编辑

我想我应该在这里澄清自己，而不是写在评论中。我假设您的目的是为所有高度为 30px 的元素设置动画。在您原来的帖子中，您有这样的内容:

if($( '.rightColumnButton' ).css("height") == "30"){

这确实会选择所有“.rightColumnButtons”，但是当您使用 css("height") 调用时，您只能获得第一个元素的高度。如果您的代码有效，则仅当第一个 div 的高度为 30 像素时，它才会为所有 div 设置动画。

这就是 each() 方法派上用场的地方。它循环遍历选择中的每个元素，并独立比较彼此的高度，并在必要时进行动画处理。