时间戳

首页 > 解决方案 > 如何通过jquery更新窗口调整大小的变量值？

jquery - 如何通过jquery更新窗口调整大小的变量值？

问题描述

我正在尝试构建一个在调整页面大小时触发的函数，并在它通过条件时更新变量的值，但我无法以任何容量更新变量。我想我不知道应该在哪里正确声明变量或在哪里更新它。

var $padding;

    function checkWidth(){
        if (($(window).width) > 750) {
            $padding = 54;
        }
        else if (($(window).width) < 751) {
            $padding = 100;
        }
        $("main").css("padding", $padding + "px 0 0 0");
    }

    $(window).resize(function(){
        checkWidth();
        console.log($(window).width());
        console.log($padding);
    });

在这种情况下，$padding 的值总是未定义的。

将 $padding 变量放在 checkWidth 或 resize 函数之上会触发“$padding 未定义”，所以我不知道它还能去哪里。如何获取要更新的值？

标签： jqueryhtmlif-statementresize

解决方案

我能够让它工作。对我来说，问题是你的 IF 声明。您将宽度包装在 () 中，强制它返回真/假，而不是宽度的数值。因为你有 if 和 else if 有同样的问题，你的 $padding 永远不会被设置。

var $padding;

    function checkWidth(){
        if ($(window).width() > 750) {
            $padding = 54;
        }
        else if ($(window).width() < 751) {
            $padding = 100;
        }
        $("main").css("padding", $padding + "px 0 0 0");
    }

    $(window).resize(function(){
        checkWidth();
        console.log($(window).width());
        console.log($padding);
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐阅读