jQuery：ページの読み込み時に変数を設定するにはどうすればいいですか？ページのサイズ変更で変数を破棄し、新しい変数を読み込みますか？

Question

私はオンラインで見つけたjQueryを使用しています。同じ高さのdivを作成するのに役立つ同じことをすべて行うバリエーションがたくさんあります。私が使用しているコードは、ページをロードするときのようなものです。

var highestCol = Math.max($('.equal_height_div1').height(),$('.equal_height_div2').height()); 
$('.equal_height').css('min-height', highestCol); 

チャームのように機能します。ブラウザウィンドウのサイズを変更する際、私は上から同じコードを再利用しますが、単にサイズ変更機能の中に置く。この作業を取得するには

：

$(window).resize(function() { 
var highestCol = Math.max($('.equal_height_div1').height(),$('.equal_height_div2').height()); 
$('.equal_height').css('min-height', highestCol); 
}); 

ここでの挑戦だ：私は1140gridを使用していますレスポンシブなレイアウト（http://cssgrid.net/）で。ウィンドウのサイズを変更するとdivのサイズが変更されます。だから、私のdivは幅が小さくなり、上記の2番目のコードセットは、ウィンドウのサイズが変更されたときにうまく機能します。

私が抱いている問題は、誰かからの洞察が大好きです。ページのサイズ変更時にminの高さの値をどうやって破壊したら、再び関数を実行して、最も高いdivから新しいmin-heightを取得しますか？問題は、divが大きくなり、ウインドウの幅が広くなるようにサイズを変更すると、divの高さを下げる必要があるが、到達したdivの最小高さにとどまっていることです。これにより、divの最小高さを常に新しい値に更新し、最大のdivの実際の高さを再計算することができます。

Answer 1

divが高さを再計算するように最小高さを設定解除します。

$('document').ready(function(){ 

    var $equal_height = $('.equal_height'), 
     $col_a = $('.equal_height_div1'); 
     $col_b = $('.equal_height_div2'); 

    // calc the highest column 
    // we assign this the return value of a function to make sure its always fresh. 
    var heighest = function($col_a, $col_b){ 
     // Cache variables in closure 
     var $col_a, $col_b; 
     // this is where the magic happens 
     return function(){  
      return Math.max($col_a.height(), $col_b.height()); 
     } 
    }($col_a, $col_b); 

    // Run once on ready to equalize columns 
    $equal_height.css('minHeight', heighest); 

    $(window).resize(function(){ 
     // By unsetting minHeight the column gets its real size back 
     $equal_height.css('minHeight', 0) 
      .css('minHeight', heighest); 
    }); 

}); 

Answer 2

私が正しく理解している場合は、幅を調整する場合は最小属性を削除する必要があります。たぶん、ちょうどこの問題を回避する

.css('min-height', 'none'); 

が、多分それは動作します：多分それは次のようにCSSを設定するのに役立ちます。