检查列的宽度并进行相应调整

Question

我已经编写了一些JS和CSS，它们允许某些列是灵活的，当浏览器调整大小时(或默认情况下)，使列比原来的宽度更细时，我删除了灵活的功能。这在本例中工作得很好：http://dev.driz.co.uk/FlexGrid.html，当您调整浏览器窗口的大小时，您将看到红色单元格要么充满屏幕，要么变成固定的宽度。这是因为您至少需要一个100%的单元格才能使正确的表格布局固定，以便与cols一起工作。

然而，我遇到的问题是，当我有两个灵活的列时，函数在其中一个列上运行，然后在另一个列上运行(至少我这么认为)，这意味着只有一列将重新添加其flex类。移除它是可以的，但是如果单元格变得比原来的更大，就不能重新应用灵活状态。请参阅此处的示例：http://dev.driz.co.uk/FlexGrid2.html

有人能帮上忙吗？提供改进代码的建议，以使函数在两个灵活的列上都能工作。

Answer 1

代码几乎是正确的，你只是把它的顺序弄错了。

在此之前，您已经为具有类flex的所有列声明了多个updateWidth()函数并绑定了窗口调整大小事件，在本例中为两次。这导致事件被一个接一个地单独触发。所以我把它移出了.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();
    });

});

我必须添加另一个类才能使flex函数工作。一个类表示列始终是灵活的(flex)，另一个类表示列的宽度(flex-width)。这意味着我们可以添加/删除可变宽度，而不会丢失列被标记为灵活的事实。

我做了另一个小的代码调整，它最初并没有停止工作，但是多余的，那就是删除任何双重jquery对象。一个例子是：

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
}

希望这能有所帮助！