在 jQuery 中合并 3 个函数答案

【问题标题】：Merge 3 functions in jQuery在 jQuery 中合并 3 个函数
【发布时间】：2013-07-18 21:03:03
【问题描述】：

这些功能完美运行，但我确信还有比这更聪明的方法：

$(window).scroll(function(){
  $('#header').css({
    'left': $(this).scrollLeft() + (($(window).width() - $("#header").width()) / 2)
  });
});

$(window).resize(function(){
  $('#header').css({
    'left': $(this).scrollLeft() + (($(window).width() - $("#header").width()) / 2)
  });
});

$(function(){
  $('#header').css({
    'left': $(this).scrollLeft() + (($(window).width() - $("#header").width()) / 2) 
  });
});

【问题讨论】：

标签： javascript jquery function merge

【解决方案1】：

你可以给你的函数命名：

$(window).on('scroll resize', something).trigger('resize');

function something(){
  $('#header').css({
    'left': $(this).scrollLeft() + (($(window).width() - $("#header").width()) / 2)
  });
}

【讨论】：

我不明白你在哪里包括它被称为$(function(){});...
@Ian 确实我忘记将所有这些都包装在 DOM 就绪处理程序中，但由于 OP 接受了这个答案，我想代码在页面底部。他在原始代码中准备好的 DOM 可能只是在加载时触发事件。 .trigger() 做同样的事情。
像魅力一样工作。谢谢卡尔-安德烈！

【解决方案2】：

将它封装在一个函数中并在 3 个地方调用它。

$(window).scroll(function () {
    alignHeader()
});

$(window).resize(function () {
    alignHeader()
});

$(function () {
    alignHeader();
});

function alignHeader() {
    $('#header').css({
        'left': $(this).scrollLeft() + (($(window).width() - $("#header").width()) / 2)
    });
}

你也可以试试这个方法

$(window).on('resize scroll', alignHeader)

$(function () {
    alignHeader();
});

function alignHeader() {
    $('#header').css({
        'left': $(this).scrollLeft() + (($(window).width() - $("#header").width()) / 2)
    });
}

【讨论】：