CSS / jQuery if () CSS-Effekt

Question

Nicht sicher, warum dies nicht funktioniert ...

Ich habe mehrere DIVs mit einer Klasse von .rightColumnButton. Ein paar von ihnen eine Höhe von 30px hat:

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

Ich möchte die margin-top ändern, um 10px wenn sie eine Höhe von 30px haben:

$(function(){

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


    }    
} );

Ist für mich nicht.

Answer 1

Mit css('height') kehrt auch das Gerät, das in der Regel ‚px‘. Also in diesem Fall, sind zu vergleichen Sie '30px' == '30'. Verwenden Sie das height() Methode, die einen numerischen Wert zurückgibt und vergleichen, die zu einer ganzen Zahl.

Auch geben Sie an, nicht das, was Objekt, das Sie animieren möchten, wie das Element innerhalb der if Klausel nicht ‚durch‘ erhalten. Verwenden Sie das each() Verfahren auf dem Element einen Verschluss zu erstellen:

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

Bearbeiten

Statt in den Kommentaren zu schreiben, ich dachte, dass ich mich hier klarstellen würde. Ich nehme an, Ihr Punkt ist es, alle Elemente zu animieren, die eine Höhe von 30px haben. In Ihrer ursprünglichen Post, mußte man diese:

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

Das tut wählen alle‘.rightColumnButtons' allright, aber wenn Sie den css("height") Anruf verwenden, Sie werden immer nur die Höhe des ersten Elements. Wenn Ihr Code gearbeitet hätte, hätte es all die divs animiert nur, wenn das erste div eine Höhe von 30px hatte.

Das ist, wo die each() Methode kommt in handlichen. Es durchläuft jedes Element in der Auswahl und vergleicht die Höhen unabhängig voneinander und animiert, wenn nötig.

Answer 2

die css() Methode wird eine Zeichenkette mit Einheiten zurückkehren, in Ihrem Fall '30px';

Sie haben also prüfen

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

oder verwenden Sie die Höhe () Funktion:

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

Sie müssen auch this definieren, bevor Animieren.

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

Answer 3

this nicht angegeben

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

Answer 4

Wie wäre das?

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

Wenn es nicht funktioniert, versuchen Sie eine Benachrichtigung für den Inhalt der Umsetzung:

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

... und einfügen und das Ergebnis hier.

Answer 5

Ich denke, das Problem ist, dass die $ ( 'rightColumnButton'). Css ... gibt eine Sammlung von Werten, und Ihr, wenn sich comaring, dass bis 30.

Versuchen Sie so etwas wie diese stattdessen:

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