CSS / jQueryの場合は（）CSSの効果

StackOverflow https://stackoverflow.com/questions/2000548

  •  18-09-2019
  •  | 
  •  

質問

なぜこれが動作していないわからない...

私は.rightColumnButtonのクラスにいくつかのdivを持っています。それらのいくつかは、30pxの高さを持っています：

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

私は、彼らが30pxの高さを持っている場合は10pxのためにマージントップを変更したい：

$(function(){

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


    }    
} );

私のために動作しません。

役に立ちましたか？

解決

また、通常、「PX」であるユニットを、css('height')リターンを使用。したがって、この場合には、あなたは'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タグの場合のみ、最初のdiv の30pxの高さを持っていた。

のすべてをアニメ化しているだろう

each()方法が便利になるところです。これは、選択内のすべての要素をループし、互いに独立して高さを比較し、必要に応じてアニメーション

他のヒント

css()方法は「30px」あなたのケースでは、ユニットの文字列を返します。

ですから、

をチェックする必要があり 
$('.rightColumnButton').css("height") == "30px"

または高さ（）関数を使用します。

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

また、アニメーションの前にthisを定義する必要があります。

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

thisが指定されていません。

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

これはどう？

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

それが動作しない場合は、コンテンツのための警告を入れてみてください。

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

...と、ここで結果を貼り付けます。

私はこの問題は、$（「rightColumnButton」）。cssの...は、値のコレクションを返し、あなたは30にすることをcomaringされている場合ということだと思います。

の代わりにこのような何かを試してみてください。

$("rightColumnButton").each(function (i) {
    if (this.height == 30) 
        $(this).animate({marginTop: "10px"}, 500);
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top