2

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

我有几个带有 .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);


    }    
} );

对我不起作用。

4

5 回答 5

3

使用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()方法派上用场的地方。它遍历选择中的每个元素，并相互独立地比较高度，并在必要时进行动画处理。

于 2010-01-04T16:28:40.573 回答
1

this未指定

$(function(){
    $( '.rightColumnButton' ).each(function(){
        if($(this).css("height") == "30"){
            $(this).animate({marginTop: "10px"}, 500);
        }
    }
    );
});
于 2010-01-04T16:30:29.057 回答
1

该css()方法将返回一个带有单位的字符串，在您的情况下为“30px”；

所以你必须检查

$('.rightColumnButton').css("height") == "30px"

或使用 height() 函数：

$('.rightColumnButton').height() == 30

您还需要this在制作动画之前进行定义。

var col = $('.rightColumnButton');
if (col.height() == 30) {
    col.animate({marginTop: "10px"});
}
于 2010-01-04T16:30:58.457 回答
0

这个怎么样 ？

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

如果它不起作用，请尝试对以下内容发出警报：

$('.rightColumnButton').css("height")

...并将结果粘贴到此处。

于 2010-01-04T16:27:07.300 回答
0

我认为问题在于 $('rightColumnButton').css... 返回值的集合，而您的 if 将其变为 30。

尝试这样的事情：

$("rightColumnButton").each(function (i) {
    if (this.height == 30) 
        $(this).animate({marginTop: "10px"}, 500);
}
于 2010-01-04T16:31:22.940 回答