CSS / jQuery إذا كان () تأثير CSS

Question

لست متأكدا لماذا هذا لا يعمل ...

لدي العديد من divs مع فئة من .righolumnbutton. بعضهم لديهم ارتفاع 30PX:

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

أريد تغيير الجزء العلوي من الهامش إلى 10 بكسل إذا كان لديهم ارتفاع 30PX:

$(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") اتصل، أنت تحصل على ارتفاع العنصر الأول فقط. إذا كان الرمز الخاص بك قد عمل، فسيحري له كل من Divs فقط إذا كان الدف الأول كان لديه ارتفاع 30PX.

هذا هو المكان الذي each() الطريقة تأتي في متناول اليدين. إنها حلقات من خلال كل عنصر في الاختيار ويقارن المرتفعات بشكل مستقل عن بعضها البعض والرسوم المتحركة إذا لزم الأمر.

Answer 2

ال css() سوف ترجع الطريقة سلسلة مع وحدات، في حالتك "30PX"؛

لذلك عليك التحقق من

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

أو استخدام وظيفة الارتفاع ():

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

تحتاج أيضا إلى تحديد this قبل الرسوم المتحركة.

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

Answer 3

this غير محدد

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

Answer 4

وماذا عن هذا ؟

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

إذا لم ينجح ذلك، فحاول وضع تنبيه لمحتوى:

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

... ولصق النتيجة هنا.

Answer 5

أعتقد أن المشكلة هي أن $ ('rightcolumnbutton'). CSS ... إرجاع مجموعة من القيم، وعندما إذا كان قذف ذلك إلى 30.

جرب شيئا مثل هذا بدلا من ذلك:

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