Question

$(window).scroll(function(){
    if ($(this).scrollTop() > 740 )
    {
        //$(".fixed-div-attendance").append($header);
        var first=0;
        var length=$('.table thead tr th').length;
            for (var i=0; i<length; i++)
            {
        console.log(i);
                var thWidth=$(".table").find("th:eq("+i+")").width();
                var tdWidth=$(".table").find("td:eq("+i+")").width();
                if (thWidth<tdWidth)
                {
                if (i==0) {
                    $(".table thead").find("th:first").width(tdWidth-50);
                }
                else
                {
                    $(".table thead").find("th:eq("+i+")").width(tdWidth);
                }
                }
                else
                {
                $(".table").find("td:eq("+i+")").width(thWidth);
                }
                first=1;
            }
            $('.table').find('thead ').addClass('fixed-div-attendance');
            //code
        }

    else {
        //$('.table thead tr th:first').css('width','auto');
           $('.table').find('thead ').removeClass('fixed-div-attendance');
    }
    });

这里我使用上面的代码为onscroll修复了thead，我怎样才能最小化这段代码，每次滚动都会运行，无论如何应用标志，然后只运行一次。

Answer 1

如果你只想运行一次for循环，那么你需要一个全局变量来检查它是否已被触发..看起来你是在正确的路径..下面是我的代码：

var first=0; //put it outside, so it will be a global variable
$(window).scroll(function(){
    if ($(this).scrollTop() > 740 )
    {
        //$(".fixed-div-attendance").append($header);
        if(first == 0){
            myLovelyForLoop();
            first = 1;
        }
        $('.table').find('thead ').addClass('fixed-div-attendance');
        //code
    }
    else {
        //$('.table thead tr th:first').css('width','auto');
           $('.table').find('thead ').removeClass('fixed-div-attendance');
    }
});
function myLovelyForLoop() {
    $('.table thead tr th').each(function(i){
        var thWidth=$(this).width();
        var tdWidth=$(".table").find("td:eq("+i+")").width();
        if (thWidth<tdWidth){
            if (i==0){
                $(this).width(tdWidth-50);
            }else{
                $(this).width(tdWidth);
            }
        }else{
            $(".table").find("td:eq("+i+")").width(thWidth);
        }
    });
}

注意：我将for循环方法更改为更紧凑的代码，我不能保证它会直接工作，因为我不知道你的HTML结构..这就是构建来自你的代码..

Answer 2

如果要注册只运行一次的侦听器，则需要删除函数本身的侦听器。我将使用jQuery，因为它在您的问题中使用。

使用您自己的代码作为示例：

$(window).scroll(onWindowScroll);
function onWindowScroll() {
    if ($(this).scrollTop() > 740) {
        //$(".fixed-div-attendance").append($header);
        var first = 0;
        var length = $('.table thead tr th').length;
        for (var i = 0; i < length; i++) {
            console.log(i);
            var thWidth = $(".table").find("th:eq(" + i + ")").width();
            var tdWidth = $(".table").find("td:eq(" + i + ")").width();
            if (thWidth < tdWidth) {
                if (i == 0) {
                    $(".table thead").find("th:first").width(tdWidth - 50);
                } else {
                    $(".table thead").find("th:eq(" + i + ")").width(tdWidth);
                }
            } else {
                $(".table").find("td:eq(" + i + ")").width(thWidth);
            }
            first = 1;
        }
        $('.table').find('thead ').addClass('fixed-div-attendance');
        //code
    } else {
        //$('.table thead tr th:first').css('width','auto');
        $('.table').find('thead ').removeClass('fixed-div-attendance');
    }
    //This is the end of the on scroll function
    $(window).off("scroll", onWindowScroll); 
});

唯一的新部分是行$(window).off("scroll", onWindowScroll);，我将回调移动到它自己的函数。

基本上，jQuery函数.scroll(function)接受一个函数，并将它绑定到您调用它的任何滚动事件。在这种情况下，您将其绑定到window。由于函数绑定到scroll事件，并且现在具有自己的函数定义，因此您可以使用jQuery函数off 取消绑定它。 .off只是取一个事件的名称，并绑定它的函数。在这种情况下"scroll"和onWindowScroll。

onscroll table thead fixed并将tbody td width应用于thead th jquery

2 个答案: