Question

我有一个resize函数，当你将窗口大小调整到该宽度时，其中的内容会发生变化。如何在窗口加载时实现这一点？我试过以下

尝试1

$(window).load(function () {
       updateDivsMargins();

        $(window).resize(updateDivsMargins);

        function updateDivsMargins() {
                var windowWidth = $(window).width();
                if (windowWidth >= 2560) {
                    alert("hello im 2560")
                    $('.1').css('margin-left', '500px');
                    $('#2').css('margin-right', '-300px');
                    $('#3').css('margin-left', '550px');
                    $('#4').css('margin-right', '-28em');
                }

        }

    });

尝试2

$(window).on("resize", function () {
            var windowWidth = $(window).width();
            if (windowWidth >= 2560) {
                alert("hello im 2560")
                $('.1').css('margin-left', '500px');
                $('#2').css('margin-right', '-300px');
                $('#3').css('margin-left', '550px');
                $('#4').css('margin-right', '-28em');
            }
        }).resize();

因此，只有当我调整页面大小时，更改才会生效，这就是我想要的。但是如果我在2560上加载页面，它就不会接受更改。所以我提出的问题是如何让它加载和调整大小。我的上述两次尝试对负载没有影响，这是错误的。

Answer 1

在事件处理函数之外编写函数，我建议使用：

 $(window).resize(updateDivsMargins);
 $(document).ready(function() {
     updateDivsMargins();
 });

，但如果您只有代码显示的2个替代方案，那么css媒体查询可能是更好的解决方案。

Answer 2

窗口load和窗口resize是单独的事件处理程序，您不应该将一个嵌套在另一个内部。只需单独定义处理程序，并让它们都调用相同的功能，如下面的代码段所示。

换句话说，如果在load上或在调整窗口大小时，width >= 2560的条件比updateDivsMargins()中的条件满足。

$(window).load(function() {
  updateDivsMargins();
});

$(window).resize(function() {
  updateDivsMargins();
});


function updateDivsMargins() {
  var windowWidth = $(window).width();
  if (windowWidth >= 2560) {
    alert("hello im 2560")
    $('.1').css('margin-left', '500px');
    $('#2').css('margin-right', '-300px');
    $('#3').css('margin-left', '550px');
    $('#4').css('margin-right', '-28em');
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如何在jquery中调用窗口加载窗口大小

2 个答案: