jquery - 如果 'x' 为 true，则删除已在浏览器调整大小时准备就绪的文档上加载的函数？

Question

如果窗口比“x”宽，我将在浏览器加载时加载 equalheights 函数。如果我想添加我的功能，我还想在浏览器调整大小以“重新测试”时再次检查“x”。

不知道该怎么做:

// global variables
var compareWidthColumn, //previous width used for comparison
detectorColumn, //the element used to compare changes
smallScreenColumn, // Size of maximum width of single column media query
jQuery(document).ready(function($) {
    //set the initial values
    detectorColumn = jQuery('.js');
    compareWidthColumn = detectorColumn.width();
    smallScreenColumn = '481';

    if ($(window).width() > smallScreenColumn) {
        $('#sidebar_right').equalHeights();
    }    

    jQuery(window).resize(function() {
        //compare everytime the window resize event fires
        if (detectorColumn.width() != compareWidthColumn) {

            //a change has occurred so update the comparison variable
            compareWidthColumn = detector.width();

            if (compareWidthColumn > smallScreenColumn) {
                $('#sidebar_right').equalHeights();
            }
        }

    });
});

整个概念是，我只想在浏览器宽度超过 481px 时应用“equalHeights”。这被应用于流体布局，我希望用户能够调整浏览器的大小，因此调用 resize。

问题:初始加载工作正常，仅当窗口宽度大于 481px 时才调用 equalHeight。问题是，如果用户从宽度超过 481 px 的浏览器开始，然后将其缩小，则 equalHeight 不会被删除。

我该如何解决这个问题？*我尝试学习 jQuery，所以有点新。

编辑评论中提到我测量了不同的东西，所以我也尝试了这个:

jQuery(document).ready(function($) {
    //set the initial values
    detectorColumn = jQuery('.js');
    compareWidthColumn = detectorColumn.width();
    smallScreenColumn = '481';

    if ($(window).width() > smallScreenColumn) {
        $('#sidebar_right').equalHeights();
    }    

    jQuery(window).resize(function() {

            if ($(window).width() > smallScreenColumn) {
                $('#sidebar_right').equalHeights();
            }
    });
});

我仍然遇到 equalHeights 不“重新测量”屏幕上的元素调整大小的问题，并且如果屏幕小于 480px，则不会自行删除。

编辑2*我应该提到我使用两种不同测量的原因是在这个脚本之前，我声明了一些全局变量:

这是我的 jquery 页面顶部的脚本上方。

// global variables
var compareWidthColumn, //previous width used for comparison
detectorColumn, //the element used to compare changes
smallScreenColumn, // Size of maximum width of single column media query

我的想法是，如果我在函数之外声明它们，它们将存储这些值。然后当屏幕大小调整时，它会将新值与全局值进行比较，如果有变化，则重做该功能。

这样的逻辑很糟糕吗？

Answer 1

也许我在这里遗漏了一些东西，但以下简单的方法应该有效(至少它会做一些事情):

$(function() {
    var $sidebar_right = $('#sidebar_right'),
        smallScreenColumn = 481;
    $(window).on('resize', function() {
        $sidebar_right.height('auto');//remove previously applied equalHeights.
        if($(window).width() > smallScreenColumn) {
            $sidebar_right.equalHeights();
        }
    }).trigger('resize');
});

我假设 .height('auto') 是基于评论 here 删除先前应用的 .equalHeights() 的正确方法。 .

您可能希望重新引入 DetectorColumn 等，但至少从表面上看，这似乎是不必要的复杂化。

当文档中的所有示例均采用 $(classSelector 形式) 时，我仍然不明白将 .equalHeights() 应用于容器会如何影响其中包含的 div ).equalHeights();。如果我的理解是正确的，那么类似 $('#sidebar_right > div') 会更合适(即所有 sidebar_right 的子 div)。

编辑:我的错。通过在容器元素上设置 .equalHeights() ，它会自动“循环遍历顶级子节点”。请参阅下面@shaWn 评论中的链接。