CSS / jquery if() css 效果答案

【问题标题】：CSS / jquery if() css effectCSS / jquery if() css 效果
【发布时间】：2010-01-04 16:25:12
【问题描述】：

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

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


    }    
} );

不适合我。

【问题讨论】：

标签： jquery css jquery-animate

【解决方案1】：

使用css('height') 也返回单位，通常是'px'。因此，在这种情况下，您正在比较 '30px' == '30'。使用height() 方法返回一个数值并将其与整数进行比较。

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

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

编辑

我想在这里澄清一下自己，而不是写在 cmets 上。我假设您的意思是为所有高度为 30 像素的元素设置动画。在你原来的帖子中，你有这个：

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

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

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

【讨论】：

感谢您的信息，您的信息很准确，但我有几个 div，我认为这只检查第一个。前三个的高度为 110px，我需要它来检查所有这些。
each 方法将遍历所有具有“rightColumnButton”类的元素，因此它会检查所有元素。
谢谢！只需要删除第一个“if(”

【解决方案2】：

css() 方法将返回一个带有单位的字符串，在你的例子中是 '30px';

所以你必须检查

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

或使用 height() 函数：

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

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

var col = $('.rightColumnButton');
if (col.height() == 30) {
    col.animate({marginTop: "10px"});
}

【讨论】：

【解决方案3】：

this 未指定

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

【讨论】：

应该是 each 而不是 foreach :)

【解决方案4】：

这个怎么样？

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

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

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

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

【讨论】：

我看到了部分问题。前三个 .rightColumnButton 的高度为 110px，其余的高度为 30px。它只检查第一个，我需要它循环。感谢您对警报的建议，它返回 110px。
关于在所有 .rightColumnButton 中运行循环的任何建议？

【解决方案5】：

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

试试这样的方法：

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

【讨论】：