Question

我编写了一些JS和CSS，允许某些列灵活，当浏览器调整大小（或默认情况下）使列比原始宽度更薄时，我删除了灵活的功能。这在这个示例中工作正常：http://dev.driz.co.uk/FlexGrid.html正如您在浏览器调整窗口时看到的那样，红色单元格填充屏幕或变为固定宽度。这是因为您需要至少一个100％的单元格才能将正确的表格布局固定为与cols一起工作。

我遇到的问题是，当我有两个灵活的列时，该函数在其中一个之前运行（至少我认为同样多）并且意味着只有一个列将重新添加其flex类。删除它很好，但如果单元格比原始单元大，则无法重新应用灵活状态。请参阅此处的示例：http://dev.driz.co.uk/FlexGrid2.html

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

Answer 1

我建议您不要添加和删除类，而是按当前宽度过滤，如果它高于最小宽度，则调整列宽，如前所述。这是一些快速的伪代码：

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

希望有所帮助！

Answer 2

代码几乎已经发现，你只是按错了顺序。

在你声明多个updateWidth()函数声明并为具有类flex的多个列绑定窗口大小调整事件之前，在这种情况下是两次。这导致事件一个接一个地被解雇。所以我将其移出了.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'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/

检查色谱柱的宽度并进行相应调整

2 个答案: