カラムの幅を確認してそれに応じて調整する

Question

特定のカラムをフレキシブルにすることができるJSとCSSを記述しています。ブラウザのサイズを変更して（デフォルトで）カラムを元の幅よりも細くしてから、 。この例ではうまくいきます：http://dev.driz.co.uk/FlexGrid.htmlブラウザのサイズを変更すると赤いセルが画面いっぱいになるか固定幅になるように見えます。これは、colで意図されたとおりに動作するように固定された適切なテーブルレイアウトのために、少なくとも1つの100％セルが必要なためです。

私は2つのフレキシブルなカラムを持っているとき、そのファンクションが他のものより前に走っている（少なくとも私はそれほど多くはないと思う）ということです。 。それを削除しても問題ありませんが、セルが元のサイズより大きくなると柔軟な状態を再適用することはできません。ここの例をご覧ください：http://dev.driz.co.uk/FlexGrid2.html

誰でも手伝ってください。フレキシブルな列の両方で機能するようにコードを改善するための提案を提供する。

Answer 1

コードはほぼ間違っていましたが、間違った順序でしかありませんでした。

複数のupdateWidth()関数の宣言を宣言し、クラスflex（この場合は2回）の列に対してウィンドウのサイズ変更イベントをバインドする前に、その結果、イベントが次々と発生しました。だから私はそれを.each()コールから外して、代わりに.each()を関数の中に入れて、今はうまくいくように思えます。

$(document).ready(function() { 

    // function declaration 
    function updateWidth() { 

     $('col.flex').each(function() { 

      var flex = $(this); 

      var original = flex.data('original'); 

      var flexIndex = flex.index() + 1; /* Add 1 because JS and CSS differ with indexes */ 

      var flexCell = $('.uiGrid table tbody td:nth-child(' + flexIndex + ')'); 

      flexCell.css({'background':'#ff0000'}); 

      ////////////////////////////////////////////////////////////// 
      if(flexCell.width() < original) { 
       $('col.flex').removeClass('flex-width'); 
      } 
      else if(flexCell.width() >= original) { 
       $('col.flex').addClass('flex-width'); 
      } 
     }); 

    } 

    // initial call 
    updateWidth(); 

    // subsequent call upon window resize 
    $(window).bind('resize', function() { 
     updateWidth(); 
    }); 

}); 

フレックス機能を動作させるために別のクラスを追加する必要がありました。 1つのクラスは、列が常にフレキシブル（flex）で、列の幅を制御する別のクラス（flex-width）を示します。これは、列にフレキシブルなフラグが立てられていることを失うことなく、柔軟な幅を追加/削除できることを意味します。

私が作ったもう1つのマイナーコード調整は、最初は動作しませんでしたが、重複していましたが、すべてのダブルjquery'edオブジェクトを削除することでした。一つの例は：

var flex = $(this); // flex is now a jquery object 
var original = $(flex).data('original'); // flex is turned into a jquery object again 

var flex = $(this); // flex is now a jquery object 
var original = flex.data('original'); // flex is already a jquery object, so can reference it as a var 

するにはを参照してくださいコードで： http://jsfiddle.net/GoranMottram/TysFf/1/
で参照してくださいデモ： http://jsfiddle.net/GoranMottram/TysFf/1/embedded/result/

Answer 2

クラスを追加したり削除したりするのではなく、現在の幅でフィルタリングし、最小幅よりも大きい場合は以前と同じように列幅を調整することをお勧めします。簡単な擬似コードは次のとおりです。

if($(flexCell).width() >= original) { 
    adjust width accordingly 
}