Question

如果窗口比“x”宽，我在浏览器加载上加载了一个equheights函数。如果我想添加我的功能，我还想在浏览器调整大小时再检查'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”。这适用于流畅的布局，我希望用户调整其浏览器的大小，从而调用调整大小。

问题：初始加载工作正常，只有在窗口宽于481px时才调用equalHeight。问题是如果用户使用大于481像素的浏览器启动，并将其缩小，则不会删除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 * 我应该提到我在这个脚本之前使用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等，但至少从表面上看，它似乎是一种不必要的并发症。

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

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

如果'x'为真，删除浏览器调整大小的文档上加载的函数？

1 个答案: