3

在调整浏览器大小时，我有一个简单的功能可以检查窗口比例以影响布局，其中一部分是：

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

以上工作完美，有 0 个问题（我将其包括在内纯粹是为了上下文）。问题似乎出在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 回答