3

ブラウザのサイズを変更するとき、レイアウトに影響を与えるためにウィンドウの比率をチェックする簡単な関数があります。その一部は次のとおりです。

if ( jQ(window).width() > ($elemH*2) ) /* Target widest settings */ {
    $body.addClass('wide').removeClass('tall');
    $elemW = ($elemH*2);
    productWideSize();

上記は完全に機能し、問題はありません（純粋にコンテキストのために含めました）。問題は にproductWideSize()あるようです。これは次のとおりです。

function productWideSize(){
    $info = jQ('#productInfo');
    $infoH = jQ('#productInfo').outerHeight();
    $maxH = (jQ('#product-form').height()-120);
    if ( $infoH < $maxH ) /* Check if element height is LT available space */ {
        $info.removeClass('scroll').css({
            'margin-top' : '-' + $infoH/2 + 'px'
        })
    } else {
        $info.addClass('scroll').css({
            'margin-top' : '',
        })
    };
};

ブラウザーのサイズを慎重に変更すると、かなりうまく機能します。しかし、ブラウザのサイズが突然変更された場合、多くの場合、if/else セクション間の遷移が発生しません。Chrome と Firefox でテスト済み。

明らかに、コードは「動作」しますが、特に堅牢ではありません。私はまだコーディングを始めたばかりで、根本的に悪い習慣を採用しているのではないかと考えています。助言がありますか？

4

1 に答える 1

0

問題は、条件で値を参照する前に値をキャッシュしていたようです。それを次のように変更すると、次のようになります。

function productWideSize(){
    $info = jQ('#productInfo');
    if ( jQ('#productInfo').outerHeight() < jQ('#product-form').height()-120 ) {
        $info.removeClass('scroll').css({
            'margin-top' : '-' + jQ('#productInfo').outerHeight()/2 + 'px'
        })
    } else {
        $info.addClass('scroll').css({
            'margin-top' : '',
        })
    }
};
于 2013-03-20T03:41:19.893 に答える