2

ウィンドウが「x」より広い場合、ブラウザのロード時に等高関数をロードしています。関数を追加したい場合は、ブラウザのサイズを「再テスト」に変更して、「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」を適用したいということです。これは流動的なレイアウトに適用されており、ユーザーがブラウザのサイズを変更していることを期待しているため、サイズを変更する必要があります。

問題：初期ロードは正しく機能します。equalHeightは、ウィンドウが481pxより広い場合にのみ呼び出されます。問題は、ユーザーが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

私の考えは、関数の外部でそれらを宣言した場合、それらは値を格納することになるということでした。次に、画面のサイズが変更されると、新しい値がグローバル値と比較され、変更があった場合は関数をやり直します。

それは悪い論理ですか？

4

1 に答える 1

2

たぶん私はここで何かが欠けていますが、次の簡単なアプローチが機能するはずです（少なくともそれは何かをするでしょう）：

$(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')以前に適用されたものを削除する正しい方法であると想定しました。.equalHeights()

再導入などを希望するかもしれませんdetectorColumnが、少なくとも表面的には、それは不必要な複雑さのようです。

.equalHeights()ドキュメント内のすべての例がの形式である場合、コンテナに適用すると、コンテナに含まれるdivにどのように影響するのかまだわかりません$(classSelector).equalHeights();。私の理解が正しければ、次のようなもの$('#sidebar_right > div')がより適切です（つまり、すべてのsidebar_rightの子div）。

編集：私の悪い。コンテナ要素を設定.equalHeights()することにより、自動的に「最上位の子ノードをループします」。以下の@shaWnのコメントのリンクを参照してください。

于 2012-07-15T01:08:58.807 に答える